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