admin管理员组文章数量:1566355
报错是这样的:
ERROR in ./src/index.js 8:13
Module parse failed: Unexpected token (8:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> const fire = <div id='fire'>Breed</div>
|
| ReactDom.render(fire, document.getElementById('parent'))
出现环境是:
webpack4.x + react使用 jsx 语法
从报错的信息中,我们可以看出是缺少loader插件,即需要loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件,这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
先贴上webpack.config.js
的配置:
module.exports = {
// mode: 'development'
// 约定大于配置
mode: 'production',
plugins:[
...
],
module: { //要打包的第三方模块
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader',
exclude: /node_modules/ }
]
}
}
然后是对package.json
和.babelrc
的配置
这里格外需要注意:因为babel-loader
的7.x版本和8.x版本的配置相差挺大的,
先从大体上介绍一下babel-loader8的变化点:
- 各个包的名字变了,都以@符号开头。这个变化带来2个影响。其一,以前每个包在node_modules目录下都是一个独立的文件夹;现在则在node-modules目录下有个叫“@babel”的目录,这里要安装的所有babel包,都在这个@babel目录下保存。其二,在配置的时候,写法完全变了。
- 有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0
- 有一些新的包必须引入进来才可以。
分别介绍7.x和8.x下的配置方法
- 7.x
.babelrc
文件:
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
package.json
文件:在"devDependencies"
下加上如下代码,然后删去node-modules
文件夹,重新npm install
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
如果选择不写入package.json
文件,直接npm的方式的话:(注意babel-loader@7 )
npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D
npm i babel-preset-env babel-preset-react babel-preset-stage-0 –D
记得检查babel-loader
的版本号,如果是8.x的话其他配置就失效了
- 8.x
.babelrc
文件:
{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"]
}
package.json
文件:在"devDependencies"
下加上如下代码 ,然后删去node-modules
文件夹,重新npm install
"@babel/core": "^7.3.4",
"babel-loader": "^8.0.5",
"@babel/runtime": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
如果选择不写入package.json
文件,直接npm的方式的话:
npm i @babel/core babel-loader @babel/plugin-transform-runtime –D
npm i @babel/preset-env @babel/runtime @babel/plugin-proposal-class-properties @babel/preset-react –D
最后
任意选择一种版本并配置即可,如果配置后仍然报错,请检查package.json
中babel-loader版本与配置是否不符合,或者和.babelrc
的配置是不是不符合。
本文标签: filehandleLoaderconfiguredloaders
版权声明:本文标题:You may need an appropriate loader to handle this file type, currently no loaders are configured... 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726297442a1064777.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论