Webpack and babel configuration issue: “You may need an appropriate loader to handle this file type.”

Question

I am trying to get another project into our a new project by importing it as a node module. I get the following error message:

   WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js 8:16
Module parse failed: Unexpected token (8:16)
You may need an appropriate loader to handle this file type.
| import * as serviceWorker from './serviceWorker';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| 
| module.hot.accept();
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
ℹ ｢wdm｣: Failed to compile.

As far as I know, this has something to do with wrong settings in the webpack.config.js , .babelrc oder the package.json . I saw that many more people had this problem and I tried to follow the constructions that I saw in the answer, but none of it worked for me. Now I ended up with the following files that still result into this error. No matter what I do, the error just doesn't go away:

package.json:

{
  "name": "mysecondapp-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "myfirstapp-react": "^2.1.2",
    "jquery": "^3.3.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router": "^4.4.0-beta.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --open --mode development",
    "build": "webpack --mode build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "react-hot-loader": "^4.6.3",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js: (this might look a bit messy since I edited a lot in order to localize the error)

const path = require("path");
const webpack = require('webpack');
module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js(x)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.svg$/,
        loaders: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              jsx: true
            }
          },
        ]
      }
    ]
  },
};

Answer 1

I fixed the issue by changing:

test: /\.js(x)$/

to

test: /\.jsx$/