JSX: You may need an appropriate loader to handle this file type

Attempting to configure my build environment to parse React and JSX with the following. However I am getting the dreaded "You may need an appropriate loader to handle this file type":

wp.js

class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}

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

index.js

import React from 'react'
import ReactDOM from 'react-dom';
import './wp.js';

webpack.config.js

....
{
        test: /js\\\.*js$/,
        use:
        [
            {
                loader:'script-loader'
            },
            {
                loader:'babel-loader'
            }
        ]
}
....

package.json

....
"devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.3.1",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "js-offcanvas": "^1.2.9",
    "node-sass": "^4.11.0",
    "popper.js": "^1.14.7",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
....

I've also put my babel presets in here (as well as in a .babelrc) file

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

I know I'll be missing something very basic but just can't see it. Thank you in advance!

Solution

It's because you're JSX rule isn't actually looking for .jsx files, only .js ones. Your 'test' regex for it is wrong.

Here's an excerpt from a webpack config that loads JSX files with babel:

  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
  }

Google around for basic React+Webpack setup articles/posts to see complete examples of webpack.config.js files for them