“Cannot find module”尽管在tsconfig中提供了正确的路径也会出现错误。

huangapple go评论82阅读模式
英文:

"Cannot find module" errors despite correct paths provided in tsconfig

问题

我在我的项目中遇到了一个反复出现的问题,涉及到构建我的下一个应用程序时。

我的项目结构如下:

├── src
│   ├── app
│   │   ├── (buyer)
│   │   ├── (login)
│   │   ├── (vendor)
│   │   ├── api
│   │   ├── layout.tsx
│   │   ├── page.module.css
│   │   ├── page.tsx
│   │   └── providers.tsx
│   ├── constants
│   │   └── next-auth.ts
├── tailwind.config.js
├── tsconfig.json
└── tsconfig.spec.json

在构建这个应用程序时,我遇到了“找不到模块”的错误,大部分是关于路径无法解析的问题。

例如:

Failed to compile.
       
       ../project-name/src/app/(buyer)/user/page.tsx:4:25
       Type error: Cannot find module '@/constants/next-auth' or its corresponding type declarations.
       
         2 | import { getServerSession } from 'next-auth'
         3 | 
       > 4 | import { OPTIONS } from '@/constants/next-auth'
           |                         ^
         5 | import { Session } from 'next-auth/core/types'
         6 | 
         7 | const User = async () => {
       Error occurred while trying to run the npx next build 
       Error: Command failed: npx next build 

编译器抱怨没有指向此模块的路径。让我们检查tsconfig.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
      "baseUrl": ".",
      "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",
      "allowSyntheticDefaultImports": true,
      "incremental": true,
      "types": ["jest", "node"],
      "plugins": [
        {
          "name": "next"
        }
      ],
      "paths": {
        "@/": ["./src/*"],
        "@/app/*": ["./src/app/*"],
        "@/constants/*": ["./src/constants/*"],
        ...
      },
    },
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ...
    ],
    "exclude": [
      "node_modules",
      "jest.config.ts",
      "src/**/*.{spec,test}.ts"
    ]
}

我知道我漏掉了一些东西,只是不知道在哪里。

英文:

I'm running into this recurring issue in my project when it comes to building my next app.

My project structure is the following:

├── src
│   ├── app
│   │   ├── (buyer)
│   │   ├── (login)
│   │   ├── (vendor)
│   │   ├── api
│   │   ├── layout.tsx
│   │   ├── page.module.css
│   │   ├── page.tsx
│   │   └── providers.tsx
│   ├── constants
│   │   └── next-auth.ts
├── tailwind.config.js
├── tsconfig.json
└── tsconfig.spec.json

When building this app, I'm running into "cannot find module" errors, mostly complaining about paths not being resolved.

For example:

Failed to compile.
       
       ../project-name/src/app/(buyer)/user/page.tsx:4:25
       Type error: Cannot find module '@/constants/next-auth' or its corresponding type declarations.
       
         2 | import { getServerSession } from 'next-auth'
         3 | 
       > 4 | import { OPTIONS } from '@/constants/next-auth'
           |                         ^
         5 | import { Session } from 'next-auth/core/types'
         6 | 
         7 | const User = async () => {
       Error occurred while trying to run the npx next build 
       Error: Command failed: npx next build 

The compiler is complaining that there is no path pointing to this module. Let's check the tsconfig.json:

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
      "baseUrl": ".",
      "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",
      "allowSyntheticDefaultImports": true,
      "incremental": true,
      "types": ["jest", "node"],
      "plugins": [
        {
          "name": "next"
        }
      ],
      "paths": {
        "@/*": ["./src/*"],
        "@/app/*": ["./src/app/*"],
        "@/constants/*": ["./src/constants/*"],
        ...
      },
    },
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ...
    ],
    "exclude": [
      "node_modules",
      "jest.config.ts",
      "src/**/*.{spec,test}.ts"
    ]
}

I know I'm missing something, I just don't know where.

答案1

得分: 2

只需提供一个路径。

而不是

"@/*": ["./src/*"],
"@/app/*": ["./src/app/*"],
"@/constants/*": ["./src/constants/*"],
...

只需

"@/*": ["./src/*"]

还要确保已正确定义了baseUrl

英文:

You just need to provide one path here.

instead of

        "@/*": ["./src/*"],
"@/app/*": ["./src/app/*"],
"@/constants/*": ["./src/constants/*"],
...

just have

"@/*": ["./src/*"]

Also make sure that you have defined baseUrl properly.

huangapple
  • 本文由 发表于 2023年7月27日 19:58:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76779513.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定