My Babel-Loader appears unable to handle JSX

Question

I'm having an issue where babel-loader doesn't appear to be able to handle any JSX code. While I'm familiar with how the higher end code of the site works, I didn't set up the environment, which is how I got in this situation!

I'm trying to reverse engineer the babel, webpack, neutrino config so I can use it elsewhere, and so I can do some package updates.

Error in terminal after running npm run develop

ℹ ｢wds｣: Project is running at http://localhost:5000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/xxx/Documents/GitHub/React-Boilerplate
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Time: 6205ms


ERROR in ./src/index.js 7:16
Module parse failed: Unexpected token (7:16)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import './globals/css/variables.css';
| import './globals/css/global.css';
> ReactDOM.render(<div>text in here</div>, document.getElementById('root'));
ℹ ｢wdm｣: Failed to compile.

So the code is hanging as soon as the babel-loader sees JSX code.

package.json

{
  "name": "xxx",
  "version": "0.0.0",
  "description": "xxx",
  "scripts": {
    "develop": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
    "generate": "plop --plopfile ./generators/plopfile.js",
    "clean": "rm -rf ./dist"
  },
  "author": "xxx",
  "license": "xxx",
  "private": true,
  "dependencies": {
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@material-ui/core": "^4.9.13",
    "@material-ui/icons": "^4.11.2",
    "@tomorrow/bloom": "^0.1.2",
    "draft-js": "^0.11.4",
    "draftjs-to-html": "^0.9.1",
    "eslint": "^5.16.0",
    "html-to-draftjs": "^1.5.0",
    "json-query": "^2.2.2",
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "postcss": "^8.2.4",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-draft-wysiwyg": "^1.14.4",
    "react-hot-loader": "^4.8.0",
    "react-promise-tracker": "^2.0.5",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.4.2",
    "react-spinners": "^0.8.3",
    "shortid": "^2.2.15"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/preset-env": "^7.12.11",
    "@neutrinojs/react": "^9.0.0-rc.0",
    "babel-core": "^6.0.20",
    "babel-loader": "^8.2.2",
    "babel-merge": "^2.0.1",
    "babel-plugin-react-css-modules": "^5.2.3",
    "babel-polyfill": "^6.0.16",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.0.15",
    "dotenv": "^7.0.0",
    "neutrino": "^9.0.0-rc.0",
    "plop": "^2.3.0",
    "postcss-aspect-ratio": "^1.0.2",
    "postcss-custom-media": "^7.0.7",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-lh": "^2.0.2",
    "postcss-loader": "^3.0.0",
    "postcss-nesting": "^7.0.0",
    "postcss-preset-env": "^6.6.0",
    "postcss-responsive-type": "^1.0.0",
    "postcss-subgrid": "^0.2.1",
    "prettier": "^1.16.4",
    "stylelint": "^9.10.1",
    "stylelint-config-recommended": "^2.1.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.1"
  }
}

webpack.config.js

const neutrino = require('neutrino');
module.exports = neutrino().webpack();

.neutrinorc.js

const { resolve } = require('path');
const babelMerge = require('babel-merge');
// require('dotenv').config();
const react = require('@neutrinojs/react');

module.exports = neutrino => {
  const { config } = neutrino;

  // Configure react preset
  neutrino.use(react, {
    html: {
      title: 'Boilerplate'
    },
    hot: true,
    devServer: {
      https: true,
      port: 3000
    },
    style: {
      loaders: ['postcss-loader']
    }
  });

  // Customize Babel
  config.module
    .rule('compile')
    .use('babel')
    .tap(options =>
      babelMerge(
        {
          plugins: [
            ['@babel/plugin-proposal-decorators', { legacy: true }],
            ['@babel/plugin-proposal-class-properties', { loose: true }],
            [
              'babel-plugin-react-css-modules',
              {
                generateScopedName: '[path]--[local]', //--[hash:base64:5]'  // took this out as code wasn't working locally on PC,
                webpackHotModuleReloading: false, //can be true in dev if
                autoResolveMultipleImports: true
              }
            ]
          ]
        },
        options
      )
    );

  // Customize CSS modules
  config.module
    .rule('style-modules')
    .use('css-modules')
    .tap(options =>
      Object.assign(
        options,
        (options.localIdentName = '[path]--[local]') //--[hash:base64:5]'// took this out as code wasn't working locally on PC,
      )
    );

  // Set webpack options
  config.output.path(resolve('./public'));
};

I suspect I need to add a new plugin to the babelMerge function - any help is wildly appreciated!

Oh, and here's src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './containers/App';
import '@tomorrow/bloom/bloom.css';
import './globals/css/variables.css';
import './globals/css/global.css';

ReactDOM.render(<div>text in here</div>, document.getElementById('root'));

Answer 1

@neutrinojs/style-loader is Neutrino middleware for loading and importing stylesheets from modules.

I did not find style-loader middleware installed in your dev dependency list. You can try it.