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-app
或yarn 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-env
和babel-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文件
如何在我的组件VUE 2(webpack)中加载外部js文件?