Javascript Nextjs从父目录导入外部组件

我有一个外部目录

common

，我想将react组件从该目录导入

webstatic

。在

webstatic

中，我正在使用nextjs

目前我有以下错误：

未找到模块：无法在“/Users/jakub/Sites/WORK/wilio web common/common/src/@vendor/atoms”中解析“react”

我将这些行添加到

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"),
    ];
  }
}

我的

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网页包

externals

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

如何做到这一点？谢谢你的帮助

像这样试试看

next.config.js

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

像这样试试

next.config.js

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

---

从Next.js 10.1.2开始，您可以使用Next.config.js中当前的

externalDir

选项：

module.exports = {
  experimental: {
    externalDir: true,
  },
};

注意，为了让React组件工作，我还必须将rootpackage.json声明为：

---

从Next.js 10.1.2开始，您可以使用Next.config.js中当前的

externalDir

选项：

module.exports = {
  experimental: {
    externalDir: true,
  },
};

注意，为了让React组件工作，我还必须将rootpackage.json声明为：

---

您希望如何使用这些组件？通过脚本标签？因为您可以添加一个入口点来编译所有这些文件，并通过

import

语句将其资产输出到web static。那么，为什么所有输出文件都必须是web static呢？为什么不直接从它们的位置导入它们呢？使用web静态文件夹的优势是什么？输出文件是什么？Web静态目录是nextjs应用程序。我想将react组件从外部目录

。/common

导入nextjs目录。好的。我所说的输出文件是指网页块。祝你好运，希望你能找到答案。显然，我对nextJs平台缺乏了解，您希望如何使用这些react组件？通过脚本标签？因为您可以添加一个入口点来编译所有这些文件，并通过

import

语句将其资产输出到web static。那么，为什么所有输出文件都必须是web static呢？为什么不直接从它们的位置导入它们呢？使用web静态文件夹的优势是什么？输出文件是什么？Web静态目录是nextjs应用程序。我想将react组件从外部目录

。/common

导入nextjs目录。好的。我所说的输出文件是指网页块。祝你好运，希望你能找到答案。显然我对nextJs平台缺乏了解