My Babel-Loader appears unable to handle JSX - reactjs

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.