Webpack无法在我的js文件中识别我的JSX语法

Question

当我尝试使用webpack捆绑我的模块时，它无法识别我的JSX文件中的index.js语法，并给出以下错误：

ERROR in ./src/index.js 29:3
Module parse failed: Unexpected token (29:3)
You may need an appropriate loader to handle this file type.
|               const searchTerm = _.debounce(term =>     {this.searchTerm(term)}, 300);
|               return (
>                       <div>
|                               <SearchBar onInputChange= {searchTerm}/>
|                               <div className="row">
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js     main[1]

这是我的webpack配置：

const Path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },


 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: Path.resolve(__dirname, '../src'),
        use: {
          loader: 'babel-loader',
           options: {
            presets: ["@babel/preset-react",  "@babel/preset-env"]
          } 
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,  
        use: [ 'css-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

我添加了babel预设的反应，即@ babel / preset-react。我还添加了babel-loader，但它仍无法识别JSX语法。

Answer 1

我克隆了你的repo，在你的代码设置上发现了一堆冲突。

1. 您的某些软件包与@babel/core软件包的最新版本不一致。如果您打算使用最新版本的babel，也可以使用最新的预设。

`

devDependencies: {
  @babel/cli: ^7.0.0,
  @babel/core: ^7.0.0,
  @babel/preset-env: ^7.0.0,
  @babel/preset-react: ^7.0.0,
  babel-loader: ^8.0.0"
}

`

我在你的babel-preset-env上删除了babel-preset-react和dependencies（旧版本）。

2. 选择一个babel配置。它可能在你的package.json或.babelrc上。我建议你坚持使用.babelrc文件。并改变了presets财产的价值。 `"presets": ["@babel/preset-react", "@babel/preset-env"],`
3. 在你的webpack.config.js你不需要做include: include: Path.resolve(__dirname, './src')。您也可以删除此行： `presets: ["react", "env"]`

和BTW，在你的package.json，

"scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "start": "webpack-dev-server --mode development",
     ...

当你运行npm start时，你的项目会查看本地安装的webpack-dev-server并使用全局的qazxswpoi如果找不到本地包。

希望这可以帮助。 :)