JSX 和 TSX 共存于 Next js 项目中

Question

我在 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：

 {
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

您的别名（@）似乎只是在您的Javascript文件上工作，因为您在tsconfig.json文件中缺少一段代码。

您只需添加

"paths": {
      "@/*": ["./*"]
    }

tsconfig.json：

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
      "paths": {
      "@/*": ["./*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}