ERROR in ./src/index.js 14:4 Module parse failed: Unexpected token (14:4) You may need an appropriate loader to handle this file type

Question

I am tryiyng to run react with webpack. I am getting following error:

ERROR in ./src/index.js 14:4 Module parse failed: Unexpected token (14:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

| ReactDOM.render(
>     <HashRouter>
|         <App />
|     </HashRouter>,

webpack.config.js

module.exports = {
    entry: path.resolve(__dirname, 'src/App.js'),
    watch: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
            }
        }]
    }, 
}  

package.json

{
  "name": "app-weather",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "bulma": "^0.7.5",
    "dotenv": "^8.0.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "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": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

Answer 1

Modify your babel-loader config:

1. Change your test condition to /\.jsx?$/, so .jsx will be also transpiled.
2. Add options with your react preset under(!) use (not as sibling to use)
3. If you want to use Babel 6, then you need to install babel-loader v7 (npm i -D babel-loader@7) instead of v8 which is for Babel 7.

Then you should be fine. Here are the relevant parts of configs for Babel 6 (and 7 if you want to change) that worked for me:

Babel 6

webpack:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          },
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
}

Babel 7

webpack:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/, 
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"]
          }
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6"
  }
}

Hope, it helps.