关于react.js:React报错之Cannot-find-namespace-context

注释从这开始~

总览

在 React 中，为了解决 ”Cannot find namespace context” 谬误，在你应用 JSX 的文件中应用 .tsx 扩展名，在你的 tsconfig.json 文件中把 jsx 设置为 react-jsx，并确保为你的利用程序安装所有必要的@types 包。

这里有个例子来展现谬误是如何产生的。

// App.ts
import React from 'react';

interface UserCtx {
  first: string;
  last: string;
  age: number;
}

const AuthContext = React.createContext<UserCtx | null>(null);

const authContext: UserCtx = {
  first: 'James',
  last: 'Doe',
  age: 30,
};

const App = () => {// ⛔️ Cannot find namespace 'AuthContext'.ts(2503)
  return (<AuthContext.Provider value={authContext}>
      <h2>Your app here</h2>
    </AuthContext.Provider>
  );
};

export default App;

上述代码片段的问题在于，文件的扩大名为.ts，然而咱们在外面编写 JSX 代码。

tsx

这是不被容许的，因为为了能在 TypeScript 文件中应用 JSX，咱们必须这样做：

1. 以 .tsx 扩展名命名文件
2. 在 tsconfig.json 文件中开启 jsx 选项

确保所有你编写 JSX 代码的文件都有 .tsx 扩展名。

// App.tsx
import React from 'react';

interface UserCtx {
  first: string;
  last: string;
  age: number;
}

const AuthContext = React.createContext<UserCtx | null>(null);

const authContext: UserCtx = {
  first: 'James',
  last: 'Doe',
  age: 30,
};

const App = () => {
  return (<AuthContext.Provider value={authContext}>
      <h2>Your app here</h2>
    </AuthContext.Provider>
  );
};

export default App;

更新完文件的扩大名为 .tsx 后，如果问题仍未解决，请尝试重启你的 IDE 和开发服务器。

关上 tsconfig.json 文件，并确保 jsx 选项被设置为react-jsx。

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx", // 👈️ make sure you have this
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*"]
}

当 jsx 选项被设置为 react-jsx 时，它会导致编译器抛出 .js 文件，其中的 JSX 被改为 _jsx 调用。

如有必要请重启你的 IDE 和开发服务器。你的开发服务器不会接管这些变动，直到你进行它并从新运行 npm start 命令。

装置 @types/ 包

在 React 中呈现 ”Cannot find namespace context” 谬误的另一个起因是，咱们没有装置必要的 @types/ 包。

在我的项目的根门路下关上终端，并运行以下命令：

# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript

# ------------------------------------------------------

# 👇️ with YARN
yarn add @types/react @types/react-dom @types/node @types/jest typescript --dev

该命令为 react，react-dom，node，jest 装置类型申明文件，并装置 typescript 包。

如果依然报错，尝试删除 node_modules 和package-lock.json文件（不是 package.json），从新运行npm install 并重启你的 IDE。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

npm install

如果谬误依然存在，请确保重新启动你的 IDE 和开发服务器。VSCode 经常出现故障，重启有时会解决一些问题。

手动增加

如果你依然失去 ”Cannot find namespace Context” 的谬误，关上你的 package.json 文件，确保它在 devDependencies 对象中蕴含以下包。

// package.json
{
  // ... rest
  "devDependencies": {
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "typescript": "^4.6.3"
  }
}

你能够尝试手动增加上述依赖，并从新运行npm install。

npm install

或者装置依赖包的最新版本：

# 👇️ with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest

# ------------------------------------------------------

# 👇️ with YARN
yarn add @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest --dev