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

Question

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!

Jayce444 Jayce444 · Accepted Answer · 2019-05-13T11:57:24

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

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

1 Answers