无法解析创建tsconfig.json后的模块。

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

Can't resolve modules after creating tsconfig.json

问题

我有一个运行良好的Next.js 13项目。

现在我想添加一个tsx组件。由于这需要TypeScript，我按照文档的建议执行了以下操作：

  1. touch tsconfig.json

但在之后运行npm run dev时，开始出现找不到模块的错误：

  1. $ npm run dev
  3. > tailwindui-salient@0.1.0 dev
  4. > next dev
  6. ready - started server on 0.0.0.0:3000, url: http://localhost:3000
  7. info  - Loaded env from /Users/myuser/code/my-frontend/.env.development
  8. info  - Loaded env from /Users/myuser/code/my-frontend/.env
  9. We detected TypeScript in your project and created a tsconfig.json file for you.
  11. error - ./src/pages/_app.jsx:4:0
  12. Module not found: Can't resolve '@/styles/tailwind.css'
  13.   2 | 
  14.   3 | import 'focus-visible'
  15. > 4 | import '@/styles/tailwind.css'
  16.   5 | import { appWithTranslation } from 'next-i18next'
  17.   6 | import { useEffect } from 'react'
  18.   7 | import { init, push } from "@socialgouv/matomo-next"
  20. https://nextjs.org/docs/messages/module-not-found

当我运行npm run build时，它抱怨有很多使用@/…语法的导入。

我的Node.js版本是v18.14.2。

编辑：以下是生成的tsconfig文件（这是由Next.js生成的，我没有更改任何内容）：

  1. {
  2.   "compilerOptions": {
  3.     "target": "es5",
  4.     "lib": [
  5.       "dom",
  6.       "dom.iterable",
  7.       "esnext"
  8.     ],
  9.     "allowJs": true,
  10.     "skipLibCheck": true,
  11.     "strict": false,
  12.     "forceConsistentCasingInFileNames": true,
  13.     "noEmit": true,
  14.     "incremental": true,
  15.     "esModuleInterop": true,
  16.     "module": "esnext",
  17.     "moduleResolution": "node",
  18.     "resolveJsonModule": true,
  19.     "isolatedModules": true,
  20.     "jsx": "preserve"
  21.   },
  22.   "include": [
  23.     "next-env.d.ts",
  24.     "**/*.ts",
  25.     "**/*.tsx"
  26.   ],
  27.   "exclude": [
  28.     "node_modules"
  29.   ]
  30. }
英文:

I have a next.js 13 project which runs all fine.

Now I wanted to add a tsx component. As this requires typescript I did as the docs said:

  1. touch tsconfig.json

But when I run npm run dev after, I start getting module not found errors:

  1. $ npm run dev        
  3. > tailwindui-salient@0.1.0 dev
  4. > next dev
  6. ready - started server on 0.0.0.0:3000, url: http://localhost:3000
  7. info  - Loaded env from /Users/myuser/code/my-frontend/.env.development
  8. info  - Loaded env from /Users/myuser/code/my-frontend/.env
  9. We detected TypeScript in your project and created a tsconfig.json file for you.
  11. error - ./src/pages/_app.jsx:4:0
  12. Module not found: Can't resolve '@/styles/tailwind.css'
  13.   2 | 
  14.   3 | import 'focus-visible'
  15. > 4 | import '@/styles/tailwind.css'
  16.   5 | import { appWithTranslation } from 'next-i18next'
  17.   6 | import { useEffect } from 'react'
  18.   7 | import { init, push } from "@socialgouv/matomo-next";
  20. https://nextjs.org/docs/messages/module-not-found

When I run npm run build it complains about many more imports with the @/… syntax.

My node version is v18.14.2.

Edit: Here is the generated tsconfig (this is generated by next.js, I haven't changed anything):

  1. {
  2.   "compilerOptions": {
  3.     "target": "es5",
  4.     "lib": [
  5.       "dom",
  6.       "dom.iterable",
  7.       "esnext"
  8.     ],
  9.     "allowJs": true,
  10.     "skipLibCheck": true,
  11.     "strict": false,
  12.     "forceConsistentCasingInFileNames": true,
  13.     "noEmit": true,
  14.     "incremental": true,
  15.     "esModuleInterop": true,
  16.     "module": "esnext",
  17.     "moduleResolution": "node",
  18.     "resolveJsonModule": true,
  19.     "isolatedModules": true,
  20.     "jsx": "preserve"
  21.   },
  22.   "include": [
  23.     "next-env.d.ts",
  24.     "**/*.ts",
  25.     "**/*.tsx"
  26.   ],
  27.   "exclude": [
  28.     "node_modules"
  29.   ]
  30. }

答案1

得分: 2

生成的 tsconfig.json 文件中缺少以下内容，应该添加到 compilerOptions 中：

  1. "baseUrl": ".",
  2. "paths": {
  3.   "@/": ["src/*"]
  4. }

我将这部分内容从 jsconfig.json 复制过来，不清楚为什么 Next.js 在生成 tsconfig 时没有添加它们。

英文:

The generated tsconfig.json was missing these lines within compilerOptions:

  1. "baseUrl": ".",
  2.  "paths": {
  3.    "@/*": ["src/*"]
  4.  }

I copied this over from jsconfig.json - no idea why next.js did not add them when it generated the tsconfig.

huangapple
  • 本文由 发表于 2023年3月7日 14:04:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/75658512.html
  • next.js
  • typescript
匿名

发表评论

匿名网友

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

确定