Webpack ReferenceError：未定义要求（ReactJS）答案

【问题标题】：Webpack ReferenceError: require is not defined (ReactJS)Webpack ReferenceError：未定义要求（ReactJS）
【发布时间】：2019-03-19 07:56:29
【问题描述】：

我了解当在浏览器中调用 require() 函数而不是在节点中调用函数时会发生此错误。但是，我似乎无法理解我究竟需要做什么来解决这个问题。任何帮助将不胜感激。您可以访问以下 repo 获取整个代码库 https://github.com/thegreekjester/React_SSR。

运行和重现问题的步骤：

npm 安装
npm 运行开发
在浏览器中打开localhost:3000
您将在控制台中看到错误

Webpack.client.js

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');

module.exports = {

  // production || development
  mode: 'development',

  // Inform webpack that we're building a bundle
  // for nodeJS, rather then for the browser
  target: 'node',

  // Tell webpack the root file of our
  // server application
  entry: './src/client.js',

  // Tell webpack where to put the output file
  // that is generated
  output: {
    filename: 'client_bundle.js',
    path: path.resolve(__dirname, 'build/public'),
    publicPath: '/build/public'
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        options: {
          presets: [
            'react', 'stage-0', ['env', {
              target: 'web'
            }]
          ]
        }
      }
    ]
  }
};

Webpack.server.js

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');

module.exports = {

  // production || development
  mode: 'development',

  // Inform webpack that we're building a bundle
  // for nodeJS, rather then for the browser
  target: 'node',

  // Tell webpack the root file of our
  // server application
  entry: './server.js',

  // Tell webpack where to put the output file
  // that is generated
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build'
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        options: {
          presets: [
            'react', 'stage-0', ['env', {
              target: { browsers: ['last 2 versions']}
            }]
          ]
        }
      }
    ]
  },

  // Tell webpack not to bundle any libraries that exist in the 'node_modules' folder
  // into the server bundle
  externals: [webpackNodeExternals()]

};

【问题讨论】：

是因为这个包@optimizely/optimizely-sdk。我刚刚从configureStore.js 文件中删除了这个包的使用，一切正常。我不熟悉这个包的用法，但好像你用错了。！！
您好@RaghavGarg 感谢您的快速回复和帮助编辑问题。文件 'optimizelyReducer' 只是 redux 的一个 reducer 文件，它有一些依赖关系。即使您取出初始导入语句（来自 optimizelyReducer.js），下一个（axios）仍然会导致该错误。
是的，你是对的。请参阅我对实际问题的回答。

标签： javascript reactjs webpack redux react-redux

【解决方案1】：

在您的webpack.client.js 中，请删除密钥target: 'node'，因为 webpack 为客户端（浏览器）捆绑。

在您的webpack.server.js 中，请添加一个密钥libraryTarget: 'commonjs2' 到output。它看起来像这样：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build',
    libraryTarget: 'commonjs2',
},

【讨论】：