React error Can't find namespace context

The text starts here~

Overview

In React, to resolve the "Cannot find namespace context" error, use the .tsx extension in your JSX file, and in your tsconfig.json file put jsx --set to jsx react-jsx and make sure to install all necessary @types packages for your application.

Here is an example to show how the error occurs.

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

The problem with the above code snippet is that the file has the extension .ts but we are writing JSX code inside.

tsx

This is not allowed because in order to be able to use JSX in TypeScript files we have to do:

1. Name the file with the .tsx extension
2. Open the jsx option in the tsconfig.json file

Make sure all files you write JSX code in have the .tsx extension.

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

After updating the file extension to .tsx , if the problem is still not resolved, please try restarting your IDE and development server.

Open the tsconfig.json file and make sure the jsx option is set to 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/**/*"]
}

When the jsx option is set to react-jsx , it causes the compiler to throw a .js file where the JSX is changed to _jsx transfer.

Restart your IDE and development server if necessary. Your development server will not pick up these changes until you stop it and rerun the npm start command.

Install @types/package

Another reason for getting "Cannot find namespace context" error in React is that we don't have the necessary @types/ package installed.

Open a terminal at the root of the project and run the following commands:

 # 👇️ 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包。

If the error still occurs, try to delete node_modules and package-lock.json files (not package.json ), re-run npm install and restart your 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

If the error persists, make sure to restart your IDE and development server. VSCode crashes frequently, and restarting sometimes solves some issues.

add manully

If you still get the "Cannot find namespace Context" error, open your package.json file and make sure it contains the following packages in the devDependencies object.

 // 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"
  }
}

You can try adding the above dependencies manually and re-run npm install .

 npm install

Or install the latest version of the dependency package:

 # 👇️ 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