React Error Messages

React Error Messages

In this article, we will summarize the common errors that often occur in the process of making a React project. We will analyze the cause of the error and the solutions to fix it.

React Error Messages

Attempted imported error ‘#’ is not exported from

Surely you’ve encountered this error at least once in your life while using React. The error “Attempted to import error “#”not exported from” occurs when you try to import a name that does not exist in your file. An example of the error message being sent is as follows:

Failed to compile.
Attempted import error: 'Infor' is not exported from './infor' (imported as 'Infor').

For error handling, when working with default exports, avoid using curly braces around names.

You can find other solutions analyzed by experts in this article:

Type ‘#’ is missing the following properties from type ‘##’

When declaring properties for components you often get the error “Type ‘#’ is missing the following properties from type ‘##'”.

The cause of the error is that you didn’t pass enough properties or didn’t pass any of the required properties in the component. The simplest error-handling solution is to double-check the component’s properties and make sure you’ve passed all required component properties.

The article below summarizes solutions for error handling that you can refer to:

Undefined symbols for architecture x86_64

When you run the simulator for React Native application with Xcode on a computer running M1 or M2, in case the program is not compatible with your ecosystem, it results in the error Undefined symbols for architecture x86_64. 

The solution that works for you is to upgrade your current React Native version, you can run the command and optionally the version you want:

npm install -g react-native@latest
npx react-native upgrade

Or also disable the emulator for ARM64 architecture to remove them.

Learn more about the error and how to deal with it in this article:

useLocation() may be used only in the context of a Router component

The error occurs when you don’t use useLocation inside the Router context in react-router.

The solution to this error is that you can wrap it inside a Router component:

import React from "react";
import { useLocation } from "react-router-dom";
 
const App = () => {
   const location = useLocation();
 
   return (
     <div>
       <button
         onClick={() => {
           console.log(location);
         }}
       >
         Click Me
       </button>
     </div>
   );
};
export default App;

In React, React-Router is considered the standard routing library to keep the application’s URL and interface in sync. To do this, the useLocation() hook is the method for React to do it. Learn more about errors and other interesting knowledge in the article below:

React hook useeffect has a missing dependency

An error occurs when the use of the “useEffect” hook includes a variable or a function that is not included in the dependencies array. Simply put, when working with the useEffect hook, it will require returning an array of dependencies. For example:

const anArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   useEffect(() => {
     console.log(anArray);
   }, [anArray]);

The result of the anArray argument passed in the second argument is an array of dependencies.

In the article below, we have detailed instructions on error handling steps and specific examples, refer to it right here:

A component is changing an uncontrolled input to be controlled

The error occurs when you have not passed the initial value and as such it is considered undefined. As a workaround you can either pass it an empty string or use the nullish association operator (??) to check the variable’s determinism. For example:

function App() {
   const [name, setName] = useState(""); // <--- Initial with an empty string
   const handleInput = (e) => {
     setName(e.target.value);
   };

We have compiled detailed instructions in the article below:

Module not found: can’t resolve ‘#’

The error occurs when you access the file with the incorrect path or you have not installed the third-party packages to support this feature. The fix is you can execute below commands in your file:

rm -rf node_modules
rm -f package-lock.json
npm install

Learn more and see detailed handling instructions in the article below:

Adjacent JSX elements must be wrapped in an enclosing tag

When you try to render more than one element in the program, this is what causes the above error. The workaround is to wrap all the elements in an element and get it as the root element or use Fragments. See detailed examples in the article below:

Property ‘value’ does not exist on type EventTarget

When working with the DOM in Typescript, you may encounter this error. For example:

function App() {
   const handleOnclick = (event: Event) => {
     console.log(event.target.value);
   };
 
   return (
     <div>
       <button onClick={handleOnclick} id="message">Click me!</button>
     </div>
   );
}
 
export default App;

The result returns an error message because you chose the wrong event type and the system failed to get the element’s value. Follow the ways to handle right in the article below:

You Cannot Render A Router Inside Another Router

When working with React-router-dom, users will often encounter problems related to router settings. The above error is caused by using more than one <Router> component in the project and this is causing the conflict. The course of action is to adjust and reset the router. You can follow the specific steps in this article:

Module not found: Can’t resolve ‘@emotion/react

When you enter the following command while its package is not installed:

import { css } from '@emotion/react';

The above error will occur because this feature is not yet supported. The simple solution is to install the @emotion/react package in your file so you can take it out anytime. Detailed instructions on how to install the package are in this article:

Module not found: Can’t resolve ‘@mui/material

When you don’t have any of these packages installed:

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';

Then after entering them, the system will return an error message for you. The reason is simply because you do not have Material UI installed on your computer. The simple way to handle the error is to add the missing one. You can see the installation step-by-step instructions in the article below:

useNavigate() may be used only in the context of a Router component

The error occurs because you use the useNavigate() hook outside the scope of the React component. To put it simply, the useNavigate() hook must be nested inside the Router. So a quick way to handle the error is that you need to incorporate all the components that use the useNavigate() hook into the React component in your project. Detailed steps are mentioned here:

useRoutes() may be used only in the context of Router component

This is also a similar case when you work with hooks useNavigate(), useLocation() … The reason is because these hooks need to be nested inside the Project’s Router. The concrete solution is to wrap them in a react component. Details of solutions are in this article:

React refers to UMD global, but the current file is a module

The cause of this error is using an old version that causes when you import a React statement that contains jsx, react recognizes your file as a component. As a workaround you can use import React so that React will enqueue this file as a component, for example:

import React from "react"
const Component =()=>{
   return( <>Hello LearnShareIT</>)
}

export default Component

In addition, you can refer to some other ways in this article:

Other

Summary

In this article, we have summarized common React Error Messages and presented ways to deal with them. Always be careful to avoid unexpected errors that affect your working process. Follow our other articles to gain more necessary IT knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *