Next.js导入env.mjs至TypeScript时出现TS2307错误求助

我用@t3-oss/env-nextjs在Next.js中构建环境变量验证器，执行yarn dev时弹出错误：

TS2307: Cannot find module '../../env.mjs' or its corresponding type declarations

应用可以正常运行，但每次启动服务器都会显示该错误，不确定此问题是否严重。

相关文件内容 #

env.mjs #

// @ts-check
import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
  /*
   * Serverside Environment variables, not available on the client.
   * Will throw if you access these variables on the client.
   */
  server: {
    API_URL: z.string(),
    NODE_ENV: z.enum(['development', 'test', 'production']),
  },
  /*
   * Environment variables available on the client (and server).
   *
   * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
   */
  client: {
    NEXT_PUBLIC_ENV: z.enum(['development', 'test', 'production']),
    NEXT_PUBLIC_API_URL: z.string(),
  },
  /*
   * Due to how Next.js bundles environment variables on Edge and Client,
   * we need to manually destructure them to make sure all are included in bundle.
   *
   * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
   */
  runtimeEnv: {
    API_URL: process.env.API_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_API_URL: process.env.API_URL,
  },
});

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": 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": {
      "@root/*": [
        "src/*"
      ]
    },
    "allowJs": true,
    "moduleResolution": "node"
  },
  "include": [
    "next.config.mjs",
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

package.json #

{
  "dependencies": {
    "@acme/core": "0.0.0",
    "@acme/db": "0.0.0",
    "@prisma/client": "4.15.0",
    "@t3-oss/env-nextjs": "^0.4.0",
    "@tanstack/react-query": "^4.29.12",
    "@trpc/client": "^10.28.2",
    "@trpc/next": "^10.28.2",
    "@trpc/react-query": "^10.28.2",
    "@trpc/server": "10.28.2",
    "clsx": "1.2.1",
    "daisyui": "3.0.0",
    "i18next": "22.5.0",
    "next": "13.4.4",
    "next-i18next": "13.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.44.2",
    "react-i18next": "^12.3.1",
    "react-query": "3.39.3",
    "superjson": "1.12.3",
    "zod": "3.21.4"
  },
  "devDependencies": {
    "@acme/tsconfig": "0.0.0",
    "@axe-core/react": "4.7.1",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.41.0",
    "eslint-config-acme": "0.0.0",
    "eslint-plugin-tailwindcss": "3.12.1",
    "i18next-typescript": "0.1.0",
    "postcss": "8.4.24",
    "prettier": "2.8.8",
    "prettier-plugin-tailwindcss": "0.3.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  }
}

解决方案 #

1. 验证文件路径正确性 #

检查导入../../env.mjs的文件所在目录，确认env.mjs确实位于当前文件向上两级的目录中。比如导入文件在src/app/page.tsx，则env.mjs应在项目根目录（./env.mjs），此时路径正确；如果env.mjs在src目录下，路径需改为../env.mjs。

2. 让TypeScript识别.mjs文件 #

修改tsconfig.json的include数组，添加**/*.mjs，确保TypeScript能扫描到该文件：

"include": [
  "next.config.mjs",
  "next-env.d.ts",
  ".next/types/**/*.ts",
  "**/*.ts",
  "**/*.tsx",
  "**/*.mjs" // 新增
]

3. 添加类型声明（可选但推荐） #

在项目中创建env.d.ts文件（可放在根目录或src目录下），内容如下（根据实际路径调整模块声明）：

declare module '../../env.mjs' {
  import { type ZodEnv } from '@t3-oss/env-nextjs';
  export const env: ZodEnv;
}

4. 清除缓存并重启服务 #

执行命令清除Next.js缓存，再重启开发服务器：

rm -rf .next
yarn dev

内容的提问来源于stack exchange，提问作者Prashant Singh