快捷導(dǎo)航

解決React報(bào)錯(cuò)Cannot?find?namespace?context

更新時(shí)間：2022年12月01日 16:50:04 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

在React中，為了解決"Cannot find namespace context"錯(cuò)誤，在你使用JSX的文件中使用.tsx擴(kuò)展名，在你的tsconfig.json文件中把jsx設(shè)置為react-jsx，并確保為你的應(yīng)用程序安裝所有必要的@types包。

這里有個(gè)例子來展示錯(cuò)誤是如何發(fā)生的。

// 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;

上述代碼片段的問題在于，文件的擴(kuò)展名為.ts ，但是我們在里面編寫JSX代碼。

tsx

這是不被允許的，因?yàn)闉榱四茉赥ypeScript文件中使用JSX，我們必須這樣做：

以.tsx擴(kuò)展名命名文件
在tsconfig.json文件中開啟jsx選項(xiàng)

確保所有你編寫JSX代碼的文件都有.tsx擴(kuò)展名。

// 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;

更新完文件的擴(kuò)展名為.tsx后，如果問題仍未解決，請嘗試重啟你的IDE和開發(fā)服務(wù)器。

打開tsconfig.json文件，并確保jsx選項(xiàng)被設(shè)置為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/**/*"]
}

當(dāng)jsx選項(xiàng)被設(shè)置為react-jsx時(shí)，它會導(dǎo)致編譯器拋出.js文件，其中的JSX被改為_jsx調(diào)用。

如有必要請重啟你的IDE和開發(fā)服務(wù)器。你的開發(fā)服務(wù)器不會接收這些變化，直到你停止它并重新運(yùn)行npm start命令。

安裝@types/包

在React中出現(xiàn)"Cannot find namespace context"錯(cuò)誤的另一個(gè)原因是，我們沒有安裝必要的@types/包。

在項(xiàng)目的根路徑下打開終端，并運(yùn)行以下命令：

# ??? 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包。

如果仍然報(bào)錯(cuò)，嘗試刪除node_modules和package-lock.json文件（不是package.json），重新運(yùn)行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

如果錯(cuò)誤仍然存在，請確保重新啟動你的IDE和開發(fā)服務(wù)器。VSCode經(jīng)常出現(xiàn)故障，重啟有時(shí)會解決一些問題。

手動添加

如果你仍然得到"Cannot find namespace Context"的錯(cuò)誤，打開你的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"
  }
}

你可以嘗試手動添加上述依賴，并重新運(yùn)行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報(bào)錯(cuò)Cannot find namespace context的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: