Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this.

Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-react-app/node_modules/react (see exports field in /Users/mansi/letsgrowmore/to-do-list/my-react-app/node_modules/react/package.json)
ERROR in ./src/Components/Todolist.js 7:0-51
Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-react-app/node_modules/react (see exports field in /Users/mansi/letsgrowmore/to-do-list/my-react-app/node_modules/react/package.json)


webpack compiled with 1 error
import React from 'react';
import useState from 'react/cjs/react.development';
import Todoform from './Todoform';

export default function TodoList() {
  const [todos, setTodos] = useState([]);
  const addTask = task => {
    if (!task.text) {
      return;
    }
    const newTodos = [task, ...todos];
    setTodos(newTodos);
  }

  return (
    <div>
      <Todoform addTask={addTask}></Todoform>
    </div>
  );
}

I attempted npm update and even tried downgrading the version but the error persisted.

Answer №1

The problem with your code stems from the fact that you are utilizing functions that have not been imported from React.


To address this issue, it is essential to import the necessary functions from React into your codebase.

One way to accomplish this is through a technique known as tree-shaking, which involves selectively importing specific functions or variables from a module rather than bringing in everything and only using a small portion of it. This approach can significantly boost performance and reduce bundle size.

To modify your React file, replace the following line:

import React from "react";

With the following statement:

import React, { useState } from "react";

This will import the useState function from the React library.

If you require another function from React (e.g., useEffect), make sure to import it in a similar manner as how useState was imported.

import React, { useState, useEffect } from "react";

Essentially, whenever you need to import a function or variable from React, list them inside the curly braces ({}) separated by commas (,).


In summary, to fix the issue at hand, ensure that you have imported all the necessary functions and variables from React that your code relies on.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The authentication token interceptor fails to capture the request/response of a new route

I have been working on implementing JWT authentication for my Node.js, Express, and AngularJS application. I successfully generated the token and stored it in the localStorage. Following a tutorial on this website, I implemented the authInterceptor in an A ...

When attempting to deploy my application on Heroku, I encountered the error message "ReferenceError: require

My NodeJS project works fine locally but encounters issues when deployed on Heroku. Upon running "heroku logs --tail" for error checking, the following message is displayed: 2020-08-18T10:39:44.396002+00:00 app[web.1]: const express = require('expres ...

Reading text file lines in batches using Node.js

I am currently exploring a way to establish a Node.js Stream in order to read a text/CSV file iteratively as a Stream. This method would involve: Reading a batch of lines Pausing the reading process Conducting asynchronous processing: Converting all lines ...

Can a Stylus and Node.js with Express project utilize a local image?

Let's talk about using images in a Web app. In my Stylus file, style.styl, I typically set the image using code like this: .background background: url(http://path/to/image) But what if we want to save the image to our local app directory and use ...

Determine the date and time based on the number of days passed

Hey there! I have a dataset structured like this: let events = { "KOTH Airship": ["EVERY 19:00"], "KOTH Castle": ["EVERY 20:00"], Totem: ["EVERY 17:00", "EVERY 23:00"], Jum ...

Is it possible to dynamically add nodes to the palette without the need to restart the server?

Is there a way to dynamically add custom nodes to the node-red palette without relying on the standard "npm install node service" or manual server restart? If so, what is the best approach to achieve this? ...

What is the best way to ensure the menu background aligns perfectly with the header in HTML/CSS?

Issue: Menu background doesn't align with header. (visible in the image provided below) VIEW IMAGE Any suggestions on how to resolve this alignment problem? CSS CODE : .header { margin:0px auto; max-width: 960px; } #header { height:30 ...

Combining all code in Electron using Typescript

I am currently working on developing a web application using Electron written in Typescript and I am facing some challenges during the building process. Specifically, I am unsure of how to properly combine the commands tsc (used to convert my .ts file to ...

Lines that are next to each other within an svg path and have a stroke

I'm working with an SVG that contains multiple lines within a path element. <path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/> Due to the stroke-width, the lines a ...

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

Asynchronous data fetching with React Hook useEffect does not properly populate the tooltip in Material UI component

After using useEffect to fetch data, I encountered a problem in passing the data to my component. Here is some of my code: User Data Types (UPDATED) export interface IUser { display_name: string; id: string; images: Image[]; } expo ...

Incorporating HTML variables into a Django template without the need for escaping

I have encoded text in HTML format that looks like this: RT <a href="http://twitter.com/freuter">@freuter</a>... I would like to display this as formatted HTML, but I am unsure if there is a filter available to convert the encoded text back t ...

Tips for effectively handling the auth middleware in react.js by utilizing LocalStorage

After making a call to the authentication API, the plan is to save the authentication token in LocalStorage and then redirect to a dashboard that requires token validation for entry. However, an issue arises where the authentication token isn't immedi ...

Are MobX Observables interconnected with RxJS ones in any way?

Is the usage of RxJs observables in Angular comparable to that in React and MobX? I'm struggling to find information on this topic. ...

What steps can I take to reset my JavaScript code once its original purpose has been fulfilled?

I created this code, learning as I went along. It measures Beats Per Minute as one clicks the left-mouse-button each time they feel a pulse. After 10 clicks, the JavaScript code takes all the values in the array and calculates an average BPM. The issue ar ...

Build a custom Angular2 pipe to convert JSON data into an array through iteration

I am attempting to take the JSON data provided below and convert it into an array for use with *ngFor='let item of items', which will allow me to display data as item.name, etc... This is what I have tried: var out = []; for(var key1 in object) ...

Data object constructor is not triggered during JSON parsing

Currently, I am retrieving data from a server and then parsing it into TypeScript classes. To incorporate inheritance in my classes, each class must be capable of reporting its type. Let me explain the process: Starting with the base class import { PageE ...

Is it possible that the Btn classes cannot be clicked on in react.js?

In this code snippet, I am trying to create a button that redirects to another page when clicked. However, I encountered an issue when setting the className="btn". When I don't include btn in the className, the div is clickable. But as soon ...

In order for the Facebook share button to appear, a page reload is required when using Angular

I've been working on integrating Facebook's share plugin, but I've encountered an issue where the share button only shows up after reloading the page. If I navigate to the page through a link or URL, the button doesn't appear until afte ...

Utilizing ng-switch for handling null values or empty strings

Can anyone assist me with this issue? I have a variable called $rootScope.user = {name:"abc",password:"asd"}. When a service response occurs, I am dynamically creating a rootscope variable by assigning it. How can I use ng-switch to check if the variable h ...