Webpack (Module Build faild)

Question

My error is :

"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"

I don't know why this error occurs every time I do so may thing for webpack, I use CSS loader, babel loader or many loaders, but this thing is still not solved.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister(); 

webpack.config.js

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader:  "babel-loader",
       }]
   }
}

package.json

{
  "name": "webpacktutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "html-webpack-plugin": "3.2.0",
    "react-hot-loader": "^4.11.1",
    "webpack": "4.16.2",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Answer 1

Try to change Your module section with this, this is more stable option in my opinion:

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       loaders:[{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015', 'react']
        }]
   }
}

Answer 2

You can try my webpack config

module.exports = {
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

Full config can be view here

My babel.rc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

My package.json dependency

"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1"

Answer 3

Source code

---

I was able to replicate your exact error after creating my own repository using your package.json. I was able to fix the error:

"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"

by adding my own .babelrc at the root of my directory. My .babelrc looks like this:

{
    "presets": ["env", "react"]
}

---

After, I received an error regarding css-loader. To solve this, I did:

npm i -D style-loader css-loader

to get the packages and added another rule to webpack.config.js:

rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    },
    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }
]