NextJS：使用experimental.externalDir时无法在外部库中使用绝对导入

Question

我的 monorepo 具有以下使用 nextjs、lerna 和 npm 工作区的文件夹结构：

packages
    next-js-app
        pages
            index.tsx
        tsconfig.json
    ui-library
        src
            components
                 dropdown.tsx
            index.ts
            utils.ts
        tsconfig.json
package.json
lerna.json
tsconfig.json

我想导入

ui-library

中的

next-js-app

如：

// packages/next-js-app/pages/index.tsx
import { UiLibrary } from '@workspaceName/ui-library'

我通过将

externalDir: true

添加到

experimental

内的

next.config.js

中的

next-js-app

键来允许它：

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

问题

导入有效，但

packages/ui-library/src/components/dropdown.tsx

内有一行：

// packages/ui-library/src/components/dropdown.tsx
import { helperFunction } from 'utils'

意味着我想从

helperFunction

导入

packages/ui-library/src/utils.ts

。 从

next dev

运行

packages/next-js-app

脚本时，出现以下错误：

wait  - compiling...
error - ../ui-library/src/components/dropdown.tsx:3:0
Module not found: Can't resolve 'utils'
  1 | ...
  2 | ...
> 3 | import { helperFunction } from "utils"
  4 | 
  5 | const Dropdown = () => {
  6 |   const onClick = (event) => {

如果我单独运行

ui-library

，则可以在导入中使用绝对路径。

问题

在这种情况下如何使绝对导入起作用？

Answer 1

我修复这个问题的方法是向我的 webpack 配置添加别名（在 next.config.js 文件中）

module.exports = {
 ...
 experimental: {
   externalDir: true
 }
 config.resolve = {
  ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'utils': path.resolve('../../packages/ui-library/src/utils'),
      // ^ defined all paths used within my external UI library
    },
  }
}