React - "Uncaught ReferenceError: exports is not defined" in react-is.development.js

Question

I'm using the Webpack bundler and run into the following error during runtime:

Uncaught ReferenceError: exports is not defined
    at react-is.development.js:152
    at Module../node_modules/react-is/cjs/react-is.development.js (react-is.development.js:15)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/react-is/index.js (index.js:6)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/prop-types/index.js (index.js:9)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/react-router/esm/react-router.js (NavLink.js:110)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/react-router-dom/esm/react-router-dom.js (myapp.js:6735) 

webpack.config.js:

var path = require('path');

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'srcjs', 'index.jsx'),
    output: {
        path: path.join(__dirname, 'inst', 'www', '${package}', 'formwiz'),
        path: path.join(__dirname, 'inst/htmlwidgets'),
        filename: 'formwiz.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react'],
                    plugins: ['@babel/plugin-transform-runtime']
                }
            },
            {
              test: /\.css$/,
              use: [
                'style-loader',
                'css-loader'
              ]
            }
        ]
    },
    externals: {
        'react': 'window.React',
        'react-dom': 'window.ReactDOM',
        'reactR': 'window.reactR'
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

package.json:

  {
  "private": true,
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "3.0.1",
    "react-router-dom": "5.2.0",
    "react-transition-group": "4.4.1",
    "react-hook-form": "6.12.0",
    "little-state-machine": "3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^5.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
}

I'm using NodeJS and Yarn as my back-end. I've never bundled anything before, so I'm not sure what's going on here. The error is occurs on line 152 of react-is.development.js:

Exports is not defined anywhere in the script so the error makes sense. But what confuses me is that I don't run into this error when I run my app on CodeSandbox.

I noticed that ../node_modules/prop-types/index.js has the following:

if (process.env.NODE_ENV !== 'production') {
  var ReactIs = require('react-is');

  // By explicitly using `prop-types` you are opting into new development behavior.
  var throwOnDirectAccess = true;
  module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);
} else {
  // By explicitly using `prop-types` you are opting into new production behavior.
  module.exports = require('./factoryWithThrowingShims')();
}

So I understand that I am in the development environment but I still don't know what's causing the error. Any insight would be greatly appreciated as I have no prior experience with Webpack.

Answer 1

Are you following the same pattern for all your files? I mean the order of importing React before exporting.

import React from "react";
export default class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}