![](/img/trans.png)
[英]How to update and consolidate babel and webpack implementations to current best practices? (Error: Cannot find module '@babel/core')
[英]Module fails to parse at JSX, cannot find error in webpack, babel configs
我已经多次检查了此设置的详细信息,它曾经很久没被唤醒过,现在出现了一个错误...
ERROR in ./src/index.js
Module parse failed: /Users/Jeff/javascript/testbuildwords/src/index.js Unexpected token (5:11)
You may need an appropriate loader to handle this file type.
| class MyComponent extends React.Component {
| render() {
| return <div>This is my component</div>;
| }
| }
我觉得该错误一定在这些文件中,但是我仔细检查了一下,并将它们与其他文件进行了1000次比较,但我找不到该错误
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "index.js",
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /.js$/,
include: path.resolve(__dirname, "src"),
exclude: /(node_modules|bower_components|build)/,
use: "babel-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {}
}
]
}
]
},
externals: {
react: "commonjs react"
}
};
.babelrc
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
"transform-class-properties"
]
}
package.json
{
"name": "testbuildwords",
"version": "0.1.0",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"style-loader": "^0.19.0",
"webpack": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.0",
"eslint-plugin-class-property": "^1.0.6"
}
}
./src/index.js
import React from "react";
class MyComponent extends React.Component {
render() {
return <div>This is my component</div>;
}
}
export default MyComponent;
尝试添加babel react-preset 。
{
"presets": ["env", "react"]
}
我认为Webpack无法隐式解析.jsx文件。 如果将应解析的扩展名添加到webpack.config.js文件中怎么办?:
resolve: {
extensions: ['', '.js', '.jsx']
}
添加更多带有预设的规则来解析jsx扩展
test: /.jsx$/,
include: path.resolve(__dirname, "src"),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'babel-preset-stage-0']
}
}
并在解决块中添加jsx条目,例如
resolve: {
extensions: ['', '.jsx', '.js']
}
没有答案对我有帮助。 我最终将webpack
而不是devDependencies
添加到了dependencies
,因为在那里列出了webpack正在使用的其他大多数内容,之后该问题得到了解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.