React - react-is.development.js 中的“未捕获的 ReferenceError：未定义导出”

Question

我正在使用 Webpack 捆绑器，并在运行时遇到以下错误：

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"
  },
}

我使用 NodeJS 和 Yarn 作为我的后端。我以前从未捆绑任何东西，所以我不确定这里发生了什么。错误发生在react-is.development.js的第152行：

Exports 没有在脚本中的任何地方定义，所以这个错误是有意义的。但是让我困惑的是，当我在 CodeSandbox 上运行我的应用程序时，我并没有遇到这个错误。

我注意到../node_modules/prop-types/index.js 有以下内容：

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')();
}

所以我知道我在开发环境中，但我仍然不知道是什么导致了错误。任何见解都将不胜感激，因为我之前没有使用 Webpack 的经验。

Answer 1

您是否对所有文件都遵循相同的模式？ 我的意思是在exporting之前导入React的顺序。

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