Question

当我尝试将模块与webpack捆绑在一起时，它无法识别override fun onBackPressed() { // 2 because first one is NavGraph, second one is last fragment on the stack if(navController.mBackStack.size > 2) { navController.navigateUp() return } showQuitDialog() }文件中的JSX语法，并给出以下错误：

index.js

这是我的webpack配置：

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]

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

Answer 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（旧版本）。

选择一个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"]`
```

和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，如果找不到本地软件包，则使用全局项目。

希望这会有所帮助。：）

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

1 个答案: