Question

我最近更新了我的webpack配置中的所有babel预设和加载器，以支持来自我正在使用的react模块的代码，与此更新一起，我收到了与使用先前编写的代码解析JSX有关的错误。该代码以前没有引发错误，这使我相信它与升级和更新配置文件有关。

以下是引发错误的示例：

请注意，所有代码和问题均位于class

中

if / else变量设置：

if (this.props.category){
            category = <h4 className="annotation__category">{this.props.category}</h4>
        } else {
            category = null;
        }

Unexpected token (17:88)
at raise (/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:3834:17)
    at unexpected (/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:5142:16)
    at jsxParseElementAt (/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:3499:24)

包装在html标签中的道具：

 <p className="text-center"><b>{this.props.date}</b></p>

Unexpected token (12:79) (</b>)
at raise 
(/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:3834:17)
    at unexpected (/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:5142:16)
    at jsxParseElementAt (/Users/app/Desktop/Projects/node/app/node_modules/@babel/parser/lib/index.js:3499:24)

这是我的package.json：

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
  }

webpack.config.js：

module.exports = {
    mode: 'development',
    entry: "./public/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {   
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
};

.babelrc：

{ 
    "presets": [ 
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Webpack Babel Loader意外的JSX解析元素

0 个答案: