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）中分离出组件时，我得到＆＃34;模块构建失败：语法错误：lib.js的意外标记（5：1）。 一旦我将组件移动到lib.js ，我就无法理解为什么babel没有处理转换。请帮忙（我是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>
}

{...}被解释为对象文字。您不能将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表达式。

babel-loader语法错误仅适用于导入的模块

1 个答案: