ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

Question

I'm trying to set up ReactJs from scratch but npm start, dev, build, and watch are throwing the error below:

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)

I have setup package.json, webpack.config.js, and.babelrc configurations. I have equally tried out previous answers on Stack Overflow , yet the issue persist. Below are the configurations of the respective files:

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"
  ]
}

These are the index.js and the App.js files

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

This tripped me a while. I found out one of the reasons is because of the directory naming path.

I used # for a folder name and it gave me the same error you're reading into.

eg my path

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

My suggestion is looking at the pathing and seeing if everything is on the right place and referred to correctly.