JIYIK CN >

React.js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class, or variable in our code before using it. To fix this error, you need to make sure you import the value before using it in your code, such as from import {myFunc} from 'my-package'.

const App = () => {
  // ⛔️ 'useState' is not defined  no-undef
  // Uncaught ReferenceError: useState is not defined
  const [count, setCount] = useState(0);

  const handleClick = event => {
    setCount(current => current + 1);
  };
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default App;

The problem in the example above is that we forgot to import useStatethe hook before using it.

To fix this error, we have to import the function.

import {useState} from 'react';

Look at the error message and make sure to import the function causing the error before using it.

Our error message should contain the name of the function that had to be imported.

There are two types of imports in ES6 - named imports and default imports.

// 👇️ 命名导入
import {myFunc1} from 'my-package';

// 👇️ 默认导入
import myFunc2 from 'my-package';

Which type of import we have to use to import a function depends on how it is exported.

When we try to import a local file as import './myFile' instead of import myFunction from 'myFile' , we often get the error "X is not defined error".

If we get errors when using local members (not from a third-party package), make sure to specify relative paths in the import statements.

// 👇️ 命名导入
import {myFunc1} from './another-file';

// 👇️ 默认导入
import myFunc2 from './another-file';

The above example assumes that we have a file called another-file.js that is located in the same directory as App.js.

Make sure to export the function we are trying to use from another-file.js.

// 👇️ 命名导出
export const myFunc1 = () => {
  console.log('hello world');
}

// 👇️ 默认导出
export default function myFunc2() {
  console.log('hello world');
}

For example, if we need to import from one directory upwards, we can import as import {myFunc1} from '../another-file'.

After importing all the functions being used, the error will be resolved.