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

Posted

技术标签:

【中文标题】Webpack 无法在我的 js 文件中识别我的 JSX 语法【英文标题】:Webpack cannot identify my JSX syntax inside my js file 【发布时间】:2019-02-06 06:05:45 【问题描述】:

当我尝试将我的模块与 webpack 捆绑时,它无法识别我的 index.js 文件中的 JSX 语法并给出以下错误:

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
    
  
;

我已经为 react 添加了 babel 预设,即 @babel/preset-react。我还添加了 babel-loader 但它仍然无法识别 JSX 语法。

【问题讨论】:

试试"presets": ["react", "env"], 试过了,没用@RomanMaksimov 请出示您的package.json github.com/kryptokinght/react-youtube-clone/blob/master/…@RomanMaksimov 您可以尝试添加babel-preset-react-app预设(nom i babel-preset-react-appyarn add babel-preset-react-app)并使用"presets": ["react-app"]。此外,最好将 babel 选项专用于应用程序根目录中的 .babelrc 文件 【参考方案1】:

我克隆了你的 repo,发现你的代码设置有很多冲突。

    您的某些软件包与@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"

`

我删除了您的dependencies 上的babel-preset-envbabel-preset-react(旧版本)。

    选择一个babel 配置。它在您的package.json.babelrc 上。我建议你坚持使用.babelrc 文件。并更改了presets 属性的值。

    `"presets": ["@babel/preset-react", "@babel/preset-env"],`
    

    在您的webpack.config.js 上,您无需执行include: include: Path.resolve(__dirname, './src')。您也可以删除此行:

    `presets: ["react", "env"]`
    

顺便说一句,在您的 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,如果找不到本地包,则使用全局的。

希望这会有所帮助。 :)

【讨论】:

以上是关于Webpack 无法在我的 js 文件中识别我的 JSX 语法的主要内容,如果未能解决你的问题,请参考以下文章

自定义 Cordova 插件 iOS index.js 无法识别我的 .js 文件

无法从distpack文件夹中的webpack生成的index.html引用javascript和css文件

Webpack 4 - 如何解析不同的 img URL

如何在我的组件VUE 2(webpack)中加载外部js文件?

我可以在 webpack 中构建 sass/less/css 而无需在我的 JS 中使用它们吗?

Webpack 3 找到 .mp4 文件,但视频无法播放