如何修复TypeScript Next.js构建时找不到React命名空间错误

基于TypeScript + Next.js搭建小型个人项目时触发类型校验错误，报错信息如下：

./components/Layout.tsx:3:55
Type error: Cannot find namespace 'React'.


  1 | import NavBar from "@components/NavBar";
  2 | 
> 3 | export default function Layout({children} :{children :React.ReactNode}){
    |                                                       ^
  4 |   return (
  5 |     <>
  6 |       <NavBar/>
info  - Checking validity of types .%

项目采用_app.tsx嵌套Layout.tsx的结构统一管理全局公共组件，涉及核心文件代码如下：

Layout.tsx #

import NavBar from "@components/NavBar";

export default function Layout({children} :{children :React.ReactNode}){
  return (
    <>
      <NavBar/>
      <div>
        {children}
      </div>
    </>
  )
}

_app.tsx #

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '@components/Layout'
import { Provider } from 'react-redux'
import store from '@/store'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </Provider>
  )
}

export default MyApp

package.json依赖配置 #

{
  "name": "bi-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development next dev",
    "build": "NODE_ENV=development next build",
    "start": "NODE_ENV=production next start",
    "lint": "NODE_ENV=development next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@types/react-datepicker": "^4.4.2",
    "@types/react-redux": "^7.1.24",
    "apexcharts": "^3.35.3",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "dayjs": "^1.11.3",
    "dotenv": "^16.0.1",
    "mongoose": "^6.4.0",
    "next": "12.1.6",
    "path": "^0.12.7",
    "postcss": "^8.4.14",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-csv-downloader": "^2.8.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-select": "^5.3.2",
    "redux": "^4.2.0",
    "tailwindcss": "^3.1.3",
    "typesafe-actions": "^5.1.0"
  },
  "devDependencies": {
    "@types/node": "18.0.0",
    "@types/react": "^18.0.15",
    "@types/react-dom": "18.0.5",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "typescript": "4.7.4"
  }
}

Layout.tsx中直接使用了React.ReactNode作为children的类型标注，但文件内未导入React对应的类型命名空间，TypeScript无法识别React标识符，因此抛出命名空间找不到的错误。

两种方案任选其一即可：

• 方案1（React 17+推荐写法）：按需导入需要的React类型，不需要全量导入React。修改Layout.tsx顶部导入代码：

import type { ReactNode } from 'react';
import NavBar from "@components/NavBar";

export default function Layout({children} :{children :ReactNode}){
  // 其余原有业务代码保持不变

这种写法可以减少不必要的导入，打包体积更优。

• 方案2（兼容旧版React写法）：直接在文件顶部全量导入React，原有类型标注不需要修改：

import React from 'react';
import NavBar from "@components/NavBar";
// 其余代码保持原样，React.ReactNode可被正常识别

如果修改代码后报错仍未消失，先删除项目根目录下的.next缓存文件夹，再重新执行npm run dev启动项目即可。

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