解決React報錯Cannot find namespace context

Posted on by

總覽

在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，我們必須這樣做：

  • 以.tsx擴展名命名文件
  • 在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

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯Cannot find namespace context的詳細內容，更多關於React報錯解決的資料請關註WalkonNet其它相關文章！

推薦閱讀：