将 React 作为 webpack 外部包含导致找不到模块 'react'

Question

我正在创建一个 NPM 包，其中包含多个项目中常用的组件。我不想在这个包中捆绑我自己的 react/react-dom，所以我在我的 webpack.config.js 中执行以下操作：

  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom'
    }
}

我也在我的package.json

中指定了以上两个依赖为peerDependencies

我想要的是让这个包共享我的父项目（也由 Webpack 处理）具有的反应依赖性。

然而，当我将我的包作为依赖项构建我的父项目时，我收到此错误：

Error: Cannot find module 'react'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/package/dist/main.js:1:898)
    at n (/package/dist/main.js:1:62)
    at Module.<anonymous> (/package/dist/main.js:22:45607)
    at n (/package/dist/main.js:1:62)
    at /package/dist/main.js:1:861
    at Object.<anonymous> (/package/dist/main.js:1:872)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Module._compile (/parent-project/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.newLoader [as .js] (/parent-project/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12) code: 'MODULE_NOT_FOUND' }

我想知道是否有人知道我哪里出错了？如果有帮助，父项目是 NextJS 应用程序...

编辑：我尝试将包包含在标准 create-react-app 项目中，这很有效。所以现在我认为这与 NextJS 的服务器端渲染步骤有关？

Answer 1

以下是对我有用的方法：

在我的 webpack 输出配置中，我有以下内容：

  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
    libraryTarget: 'commonjs'
  },

我需要我的 libraryTarget 成为 umd 才能使程序包在客户端和服务器上都能正常工作。在我的包在客户端上工作但在服务器上不起作用之前。

将 React 作为 webpack 外部包含导致找不到模块 'react'

Including React as a webpack external results in cannot find module 'react'

external-dependencies

npm

reactjs

webpack

next.js