JSX 和 TSX 共存于 Next.js 项目中。

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

JSX and TSX coexist in Next js project

问题

我创建了我的项目在JSX基础上。我创建了一个TSX文件,然后Next.js自动创建了tsconfig.json,但是出现了一个错误:

> ./app/layout.jsx:2:0
> Module not found: Can't resolve '@components/navegador/Nav'
> 1 | import './globals.scss';
> > 2 | import Nav from '@components/navegador/Nav';
> 3 | import Foot from '@components/footer/Foot';
> 4 |
> 5 | export const metadata = {
>
> https://nextjs.org/docs/messages/module-not-found

这些组件是在JSX中的。

我尝试删除tsconfig.json,错误就不会发生,但显然我的tsx文件会显示错误。

tsconfig.json:

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

I created my project in JSX base. I created a TSX file and Next js create tsconfig.json automatically but an error occurs:

> ./app/layout.jsx:2:0
> Module not found: Can't resolve '@components/navegador/Nav'
> 1 | import './globals.scss';
> > 2 | import Nav from '@components/navegador/Nav';
> 3 | import Foot from '@components/footer/Foot';
> 4 |
> 5 | export const metadata = {
>
> https://nextjs.org/docs/messages/module-not-found

Those components are in JSX.

I tried to delete tsconfig.json and the error doesn´t occur but obviously my tsx file show errors.

tsconfig.json:

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

答案1

得分: 0

更新您的tsconfig.json的路径配置应该解决使用'@components'别名的绝对路径时的模块解析问题。

  1. {
  2. "compilerOptions": {
  3. //...您的其他配置设置
  4. "baseUrl": ".",
  5. "paths": {
  6. "@components/*": ["components/*"]
  7. }
  8. }
  9. }
英文:

updating paths configuration of your tsconfig.json should resolve the module resolution issue when using absolute paths with the '@components' alias.

  1. {
  2. "compilerOptions": {
  3. //...rest of your config settings
  4. "baseUrl": ".",
  5. "paths": {
  6. "@components/*": ["components/*"]
  7. }
  8. }
  9. }

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

发表评论

匿名网友

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

确定