столпотворение-погрузчик ошибка синтаксиса только для импортируемых модулей

Question

Изначально у меня ниже index.js файл, который компилируется и работает:

import React from 'react'; 
import { render } from 'react-dom'; 
import text from './titles.json'; 

render(
    <div> 
     <h1 id="title" 
      className="header" 
      style={{backgroundColor: 'turquoise', color: 'white', fontFamily: 'verdana'}}> 
      {text.hello} 
     </h1> 
     <h1 id="title" 
      className="header" 
      style={{backgroundColor: 'brown', color: 'white', fontFamily: 'verdana'}}> 
      {text.goodbye} 
     </h1> 
    </div>, 
    document.getElementById('react-container') 
) 

Однако, когда я отделить компоненты в отдельном файле (Lib. js), я получаю «Ошибка сборки модуля: SyntaxError: Неожиданный токен (5: 1) для lib.js. Не могу понять, почему Babel не заботится о транспиляции, как только я переведу компоненты в lib.js. Пожалуйста, помогите (я новичок в React, Webpack, Babel).

lib.js

import React from 'react'; 
import text from './titles.json' 

export const hello = { 
    <h1 id="title" 
     className="header" 
     style={{backgroundColor: 'turquoise', color: 'white', fontFamily: 'verdana'}}> 
     {text.hello} 
    </h1> 
} 

export const goodbye = { 
    <h1 id="title" 
     className="header" 
     style={{backgroundColor: 'brown', color: 'white', fontFamily: 'verdana'}}> 
     {text.goodbye} 
    </h1> 
} 

модифицированные index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { hello, goodbye } from './lib.js'; 

render(
    <div> 
     {hello} 
     {goodbye} 
    </div>, 
    document.getElementById('react-container') 
) 

Вот мой WebPack конфигурационный файл:

var webpack = require("webpack"); 

module.exports = { 
    entry: "./src/index.js", 
    output: { 
     path: require("path").resolve("dist/assets"), 
     filename: "bundle.js", 
     publicPath: "assets" 
    }, 
    devServer: { 
     inline: true, 
     contentBase: "./dist", 
     port: 3000 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules)/, 
       loader: "babel-loader", 
       query: { 
        presets: ["latest", "react", "stage-0"] 
       } 
      }, 
      { 
       test: /\.json$/, 
       exclude: /(node_modules)/, 
       loader: "json-loader" 
      } 
     ] 
    } 
} 

Answer 1

export const hello = { 
    <h1 id="title" 
     className="header" 
     style={{backgroundColor: 'turquoise', color: 'white', fontFamily: 'verdana'}}> 
     {text.hello} 
    </h1> 
} 

The {...} интерпретируются как литерал объекта. Вы не можете помещать JSX внутри объектного литерала, так же как вы не можете помещать произвольный код внутри объектного литерала.

E.g. это вызывает аналогичную ошибку:

export const hello = { 
1 + 1 
} 

Если вы хотите экспортировать элемент React, тогда сделайте именно это. Удалите {...}:

export const hello = 
    <h1 id="title" 
     className="header" 
     style={{backgroundColor: 'turquoise', color: 'white', fontFamily: 'verdana'}}> 
     {text.hello} 
    </h1>; 

---

Внутри JSX, {...} имеют различное значение. Например. в

<span>{1+1}</span> 

{...} пусть синтаксический анализатор знает, что содержание является выражением JavaScript.