在单体代码库中的 Next.js 应用程序中导入共享代码。

Question

在单体代码库中的 Next.js 应用程序中导入共享代码。

9

我希望通过重用后端（Nest.js）服务中的类型、数据传输对象和其他等同于应用程序的内容来利用单体库。在我的情况下，next.js 应用程序和 nest.js 应用程序（它本身是 nest.js 单体库）在根目录的同一级别上。我在 nest-app/libs/types/src/index.ts 中重新导出了一堆文件，然后在我的 next.js 应用程序中进行导入。但是当我这样做时，next.js 会抱怨“编译失败”的错误。

最简单的复现错误的方法如下：

为单体库创建任意文件夹，例如 test-import
导航至单体库文件夹（cd test-import）
运行 npx create-next-app@latest --typescript 并选择项目名称（如 next-app）
在单体库的根目录中（与 next-app 相同级别）创建以下 external.ts 文件
从 next-app 文件夹运行 npm run dev

单体库结构:

external.ts
next-app
  (other files omitted)
  pages
    index.tsx

external.ts

export type ExternalType = string;

export const me = "ME";

next-app/pages/index.tsx正在导入external.ts的内容。

import { me } from "../../external";

// boilerplate code omitted
<h1 className={styles.title}>
  Welcome {me} to <a href="https://nextjs.org">Next.js!</a>
</h1>

以下错误被抛出：

../external.ts
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export type ExternalType = string;
| 
| export const me = "ME";

- DK3Z

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Artyom · Accepted Answer

你需要使用实验性的externalDir特性：https://github.com/vercel/next.js/pull/22867。

// next.config.js
const nextConfig = {
  ...
  experimental: {
    externalDir: true
  }
}

我确认它至少在你描述的情况下是有效的。

话虽如此，我们也有一个Nest+Next monorepo，尽管在我们的情况下，共享代码位于Next和Nest之外，为了使其正常工作，我们不得不使用符号链接(ln -s)将共享代码链接到Nest文件夹中。如果您决定拥有一个独立于Next和Nest代码库之外的共享代码文件夹，您也可以尝试这种方法。

如果我没记错的话，有一种方法可以在没有符号链接的情况下使其工作，但是这需要Nest管理整个monorepo，包括非Nest子项目。