錯誤 in./src/index.js 模塊構建失敗（來自./node_modules/babel-loader/lib/index.js）：

Question

我正在嘗試從頭開始設置 ReactJs 但 npm 啟動、開發、構建和觀看都拋出以下錯誤：

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;

Answer 1

這讓我絆倒了一段時間。 我發現原因之一是因為目錄命名路徑。

我使用#作為文件夾名稱，它給了我您正在閱讀的相同錯誤。

例如我的路徑

C:/Users/johndoes/codes/# wip/project1/sub/

我的建議是查看路徑並查看是否所有內容都在正確的位置並正確引用。