Uncaught Reference error React is not defined - reactjs

Question

I am getting the following error
external_"react":1 Uncaught ReferenceError: react is not defined
at eval (external_"react":1)
at Object.react (bundle.js:120)
at __webpack_require__ (bundle.js:20)
at eval (client.js:2)
at Module../src/client.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
eval # external_"react":1
react # bundle.js:120
__webpack_require__ # bundle.js:20
eval # client.js:2
./src/client.js # bundle.js:97
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:84
(anonymous) # bundle.js:87
I have read many articles on here about how to solve, but nothing works.
My webpack.config.js is as follows :
const isDevelopment = process.env.NODE_ENV === 'development';
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isomorphicRules = [
{
test: /\.(js?|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require('sass'),
sassOptions: {
indentWidth: 4,
includePaths: ['public'],
},
},
}
]
},
];
const client = {
entry: './src/client.js',
output: {
path: path.join(__dirname, './src/public/dist/'),
publicPath: '/dist',
filename: 'bundle.js'
},
module: {
rules: isomorphicRules,
},
externals: ["react", "react-dom"],
plugins: [
new HtmlWebpackPlugin({
template: '!!raw-loader!' + path.join(__dirname, './src/views/clientside.ejs'),
filename: 'clientside.ejs',
inject: 'body'
})
]
};
const server = {
entry: './src/server.js',
output: {
path: path.join(__dirname, './src/public/dist/'),
filename: 'server.js'
},
module: {
rules: isomorphicRules
},
target: 'node',
externals: [nodeExternals(), "react", "react-dom"],
plugins: [
new HtmlWebpackPlugin({
template: '!!raw-loader!' + path.join(__dirname, './src/views/serverside.ejs'),
filename: 'serverside.ejs' // this line decide the extension of output file.
})
]
};
module.exports = [
client,
server,
];
I am stumped as I have added react as an external.
For good measure here is my package.json
{
"name": "webtest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"abstract-syntax-tree": "^2.9.3",
"bootstrap": "^4.5.1",
"compression": "^1.7.4",
"dotenv": "^8.2.0",
"ejs": "^3.1.3",
"express": "^4.17.1",
"fabric": "^4.1.0",
"form-data": "^3.0.0",
"formidable": "^1.2.2",
"govuk-frontend": "^3.8.1",
"highlight.js": "^10.1.2",
"moment": "^2.27.0",
"node-fetch": "^2.6.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-dom-server": "0.0.5",
"react-html-parser": "^2.0.2",
"react-json-view": "^1.19.1",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "^3.4.3"
},
"scripts": {
"webpack": "webpack --mode development --config webpack.config.js",
"dev": "set NODE_ENV=development && webpack --mode development --config webpack.config.js && nodemon --exec babel-node src/index.js"
},
"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": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/polyfill": "^7.10.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-plugin-css-modules-transform": "^1.6.2",
"cross-env": "^7.0.2",
"css-loader": "^4.2.2",
"dart-sass": "^1.25.0",
"ejs-webpack-loader": "^2.2.2",
"file-loader": "^6.0.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.10.0",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"nodemon-webpack-plugin": "^4.3.2",
"raw-loader": "^4.0.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
}
}
I am using the npm start dev script to launch.
The rendered html is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON Forms Demo</title>
</head>
<body>
<div id="root">
</div>
<script src="/dist/bundle.js"></script></body>
</html>
So it is clear to me the problem is that react is not defined. My question is why not?
My client.js looks like
import React from 'react';
import ReactDOM from 'react-dom';
import ClientApp from './clientApp';
ReactDOM.render(<ClientApp />, document.getElementById('root'));
And clientApp is as follows :
import React, { Component } from 'react';
class ClientApp extends Component {
render() {
return (
<div>
<h1>Hello World from Client Side App</h1>
</div>
);
}
}
export default ClientApp;
Also my .babelrc file looks like
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
So I feel like I've covered all the bases with what I've read on here and on the webpack website, but I clearly have missed something and would be most grateful if the panel could take a look.

Answer 1

Thanks to tmhao2005, yuRa and Freestyle09. It was driving me spare.
I removed the external directive from the webpack config and it works.