IT技术 - Nextjs 从父目录导入外部组件 - 吾爱随笔录

我有外部目录common，我想将该目录中的 react 组件导入到web-static. 在web-static我使用 nextjs。

目前我有这个错误：

Module not found: Can't resolve 'react' in '/Users/jakub/Sites/WORK/wilio-web-common/common/src/@vendor/atoms'

我将这些行添加到next.config.js：

const babeRule = config.module.rules[babelRuleIndex];
if (babeRule && babeRule.test) {
  babeRule.test = /\.(web\.)?(tsx|ts|js|mjs|jsx)$/;
  if (babeRule.include) {
    babeRule.include = [
      ...babeRule.include,
      resolve(__dirname, "../common/src/@vendor"),
    ];
  }
}

config.resolve.alias = {
  ...config.resolve.alias,
  "@vendor": resolve(__dirname, "../common/src/@vendor")
};

我的tsconfig.json文件：

"paths": {
  "@vendor/*": ["../common/src/@vendor/*"]
}

Webpack 可以解析这些组件，但无法解析这些组件中已安装的包。

../common/src/@vendor/atoms/Test.js
Module not found: Can't resolve 'react' in '/Users/user1/Sites/WORK/web-app/common/src/@vendor/atoms'

我还需要在 webpacks 中包含这个目录config.externals吗？当前的 nextjs webpackexternals

-----
options.isServer: false
[ 'next' ]
-----
-----
options.isServer: true
[ [Function] ]
-----

这怎么能做到？谢谢你的帮助

module.exports = { webpack: function (config, { defaultLoaders }) { const resolvedBaseUrl = path.resolve(config.context, "../"); config.module.rules = [ ...config.module.rules, { test: /\.(tsx|ts|js|mjs|jsx)$/, include: [resolvedBaseUrl], use: defaultLoaders.babel, exclude: (excludePath) => { return /node_modules/.test(excludePath); }, }, ]; return config; } };