Next.js 13 项目引用路径别名抛出 webpack 错误

Question

我正在将一个小而旧的 React 项目（及其 nestjs 服务器）迁移到 Next.js 13。我正在通过一个名为Create T3 App的 CLI 搭建脚手架来做到这一点。 我经常使用项目引用，在我从事的所有项目中，我在这里尝试这样做：

tsconfig.json：

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,

    "baseUrl": ".",
    "paths": {
      "@core/*": ["../../../../libs/core/src/*"]
    }
  },
  "references": [
    { "path": "../../../../libs/core/" }
  ],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
  "exclude": ["node_modules"]
}

但它一直抛出这个 webpack 加载程序错误：

错误 -../../../../libs/core/src/path/to/file.ts 模块解析失败：意外令牌 (4:12) 您可能需要适当的加载程序来处理此文件类型，当前没有加载程序配置为处理此文件。 参见https://webpack.js.org/concepts#loaders

文件上没有标记为红色的错误，vscode 的智能感知工作正常。

我尝试将别名添加到 webpack，如下所示：

next.config.mjs：

// @ts-check
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"));
import path from 'path';

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    return {
      ...config, 
      resolve: { 
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@core': path.resolve('../../../../libs/core/src'),
        }
      }
    }
  },
};
export default config;

这不会对错误消息产生任何更改。

我尝试将 ts-loader 添加到 webpack，但它会在应用程序的其他部分引发错误。 如果可能的话，我想在不使用 babel 的情况下解决这个问题。

有谁知道如何使外部项目的路径别名在 Next.js 13 上工作？

---

答案分解：

使用@Yilmaz建议的 package，称为next-transpile-modules ，我能够使项目引用及其别名起作用。 此解决方案需要在 tsconfig.json 上正确设置“ tsconfig.json ”和“paths”字段，并在next.config.mjs中添加以下内容：

import transpile from 'next-transpile-modules';

const withModules = transpile([
  '../../../../libs/core'
]);

/** @type {import("next").NextConfig} */
const config = {
  ...
};

export default withModules(config);

Answer 1

您的 tsconfig.json 不符合默认 next13 typescript配置。 我使用 --typescript 创建了下一个应用程序，这是默认的tsconfig.json 。 我没碰它

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

如果您遵循next-transpile-modules npm package 并将其设置为 next.config.js

import transpile from 'next-transpile-modules';

const withModules = transpile([
  '../../../../libs/core'
]);

/** @type {import("next").NextConfig} */
const config = {
  ...
};

export default withModules(config);