错误在 ./src/index.js 模块构建失败来自 ./node_modules/babel-loader/lib/index.js：

如何解决错误在 ./src/index.js 模块构建失败来自 ./node_modules/babel-loader/lib/index.js：

我正在尝试从头开始设置 ReactJs，但 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 上尝试了以前的答案，但问题仍然存在。以下是各个文件的配置：

package.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/

我的建议是查看路径并查看所有内容是否都在正确的位置并正确引用。