Reactjs 反应—“反应”；未捕获引用错误：未定义导出"；在react-is.development.js中

我正在使用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'
};

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

package.json:

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

  {
  "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和纱线作为后端。我以前从未打包过任何东西，所以我不确定这里发生了什么。错误发生在react is.development.js的第152行：

脚本中的任何位置都没有定义导出，因此错误是有意义的。但让我困惑的是，当我在CodeSandbox上运行我的应用程序时，我并没有遇到这个错误

我注意到

。/node\u 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的经验。

您的所有文件都遵循相同的模式吗？ 我指的是在导出之前导入

React

的顺序

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

从“React”导入React；
导出默认类App扩展React.Component{
render（）{
回复你好，世界！；
}
}

您的所有文件都遵循相同的模式吗？ 我指的是在导出之前导入

React

的顺序

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

从“React”导入React；
导出默认类App扩展React.Component{
render（）{
回复你好，世界！；
}
}

感谢您回复@sonkatamas。我可以确认我的所有文件都遵循相同的模式。当我尝试在React Router guide上捆绑应用程序时，效果很好。该演示的网页包配置与我的应用程序之间的唯一区别是在我的应用程序中包含了“@babel/plugin transform runtime”。我加入它是为了澄清另一个没有定义“regeneratorRuntime”的错误。这可能是问题所在吗？谢谢回复@sonkatamas。我可以确认我的所有文件都遵循相同的模式。当我尝试在React Router guide上捆绑应用程序时，效果很好。该演示的网页包配置与我的应用程序之间的唯一区别是在我的应用程序中包含了“@babel/plugin transform runtime”。我加入它是为了澄清另一个没有定义“regeneratorRuntime”的错误。这可能是问题所在吗？