javascript - ./src/index.js 中的错误模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):
问题描述
我正在尝试从头开始设置 ReactJ,但 npm start、dev、build 和 watch 抛出以下错误:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\da4na4\web\stocker\src\index.js: Unexpected character '�' (1:0)
我已经设置了 package.json、webpack.config.js 和 .babelrc 配置。我在Stack Overflow上同样尝试过以前的答案,但问题仍然存在。以下是各个文件的配置:
包.json
{
"name": "stocker",
"version": "1.0.0",
"description": "A product inventory web app to help you keep track of your stocks and meet demands",
"main": "webpack.config.js",
"scripts": {
"test": "jest ./src/tests",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --watch",
"start": "webpack serve --mode development --open --hot"
},
"keywords": [
"products",
"Inventory"
],
"author": "Emmanuel Joshua",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/preset-env": "^7.12.16",
"@babel/preset-react": "^7.12.13",
"@webpack-cli/serve": "^1.3.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0",
"jest": "^26.6.3",
"jsdom": "^16.4.0",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html"
});
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "js/app.min.bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss|css)$/, use: ["sass-loader", "css-loader", "style-loader"]
},
{
test: /\.(html)$/, use: ["html-loader"]
}
],
},
plugins: [htmlPlugin],
target:"node",
devServer:{
port: 3000,
contentBase: path.resolve(__dirname, "public")
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
这些是 index.js 和 App.js 文件
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/App';
ReactDOM.render(
<App firstname={"Joshua"} />,
document.getElementById("root")
)
js/App.js
import React, {Component} from 'react';
class App extends Component{
constructor(props){
super(props);
}
render(){
return(
<h1>Hello {this.props.firstname}, Welcome to our Website!</h1>
)
}
}
export default App;
解决方案
这让我绊倒了一段时间。我发现原因之一是因为目录命名路径。
我使用#
了一个文件夹名称,它给了我你正在阅读的同样的错误。
例如我的路径
C:/Users/johndoes/codes/# wip/project1/sub/
我的建议是查看路径并查看是否所有内容都在正确的位置并正确引用。
推荐阅读
- azure - 生产 Web api 托管、容器的 Web 应用程序还是 azure 容器实例?
- python - `import pandas` 错误为 `ModuleNotFoundError: No module named 'pandas.msgpack'`
- batch-file - 如何在 cmd 中模拟“ENTER”键?
- vue.js - 如何在 Vuex 模块中使用 mapGetters
- javascript - 无法从 localStorage 为我在 Nuxt 中的身份验证初始化 Vuex 存储
- java - 写入和读取 txt 文件
- sql - 在一个表的不同行和不同列中查找相同的值 SQL
- python - 有没有办法更简洁地打印特定数字的倍数?
- vimeo - 在基于 Vimeo 表单的上传中不尊重 redirect_url
- python - python中的NARX示例-训练和预测