时间戳

首页 > 解决方案 > 将 React 包含为 webpack 外部结果会导致找不到模块“react”

reactjs - 将 React 包含为 webpack 外部结果会导致找不到模块“react”

问题描述

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

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

我还指定了上述两个依赖项，如peerDependencies我的package.json

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

但是，当我将包作为依赖项构建父项目时，出现此错误：

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 的服务器端渲染步骤有关？

标签： reactjsnpmwebpacknext.jsexternal-dependencies

解决方案

这对我有用：

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

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

我需要libraryTarget让umd包在客户端和服务器上都可以工作。在我的包在客户端上工作但不在服务器上之前。

推荐阅读