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

Automatically populate the checkbox with the specified URL

Is it possible to pre-fill a checkbox in an HTML form using the URL? For example, if we have a URL like www.example.com/?itemname=sth Would there be a similar method to pre-select a checkbox via the URL? <ul class="list-group"> <li c ...

Tips for avoiding Google Tag Manager from interfering with document.write() function

We have integrated Angular into our website, however, not all pages have been migrated to Angular yet. To handle this situation, we have implemented a hybrid approach: Each request is initially directed to Angular. Once the page is loaded, it checks if th ...

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

How can I create an efficient chat system using Ajax and settimeout without causing excessive virtual memory usage?

I'm in the process of creating a chat application using AJAX that fetches data every second with setTimeout. I have drafted a basic code where there is a number that increments each second by the number retrieved from the PHP page2. Upon testing it on ...

Loading templates dynamically within ng-repeat is a powerful feature that enhances the flexibility and

I need help loading a template dynamically while using an ng-repeat: <ul> <li ng-repeat="prop in entity" > <div ng-include src="prop.template"></div> </li> </ul> The value of prop.template is the URL of ...

Adjust the alignment and size of the flexible image to be centered horizontally

I have an image with dimensions of 3051 x 1716 pixels. https://i.sstatic.net/Y3Wi7m.jpg While viewing it on mobile, I would like to adjust it to look like this without cropping the image or uploading it again: https://i.sstatic.net/lJ1NSm.jpg In other ...

What is the reason for the error that Express-handlebars is showing, stating that the engine

I recently added express-handlebars to my project and attempted the following setup: const express = require("express"); const exphbs = require('express-handlebars'); const app = express(); app.engine('.hbs', engine({defaultL ...

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

Refresh the element by running a function in a separate module

When two components communicate with each other, the process involves adding a product to the cart (component #1) which triggers an update to the setState through a service (component #2). An error occurs when attempting to add the product to the cart, in ...

What is the method for linking one model to another model using two foreign keys in sequelize?

Imagine a scenario You are dealing with two models: event_user with the following attributes: id event_user_message with the following attributes: user_from_id, user_to_id Your task is to retrieve 20 event_users who have been in contact (via messages) wi ...

The ReactJS component in the MERN stack does not recognize the Object.Array.map method

This is my custom component: import React, { useEffect, useState } from 'react' import './viewAcc.css' import HttpService from '../../services/http-service' const http = new HttpService() function ViewAcc({match}){ useE ...

transferring a LatLng variable from one function to initialize Google Maps

I have a database in firebase that stores latitude and longitude values which I retrieve as the variable coords. function getCoords() { var place_data= firebase.database().ref("/place/name"); place_data.once('value').then(function(snaps ...

Tips for preserving the jquery inputmask after updating the DOM

It's difficult to explain, but here is a snippet showcasing the issue. (function() { var PhoneNumber = function() { this.name = ko.observable(); this.phone = ko.observable(); }; $('[data-mask="phone"]').inputmask({ mask ...

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

Transforming JavaScript date into JSON date structure

Currently, I am integrating an API that requires the JSON date format. My task involves converting a JavaScript date Sat Jan 17 1970 07:28:19 GMT+0100 (Romance Standard Time) into the JSON date format: /Date(1405699200)/ ...

"Exploring the functionality of HTML buttons on iOS Safari with Angular click

Currently, I am developing a web app that includes a feature where users can hold down a button to adjust a value. The backend of the app is supported by Meteor.js with Angular serving as the front end. The functionality works perfectly, except for Mobile ...

Issue with setting a background image to a div in Next.js: not functioning as expected

I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, whi ...

Ways to have MongoDB present nested JSON data as an array?

I recently came across some interesting data: { "_id" : ObjectId("5461e16ee7caf96f8f3584a2"), "num_marcacao" : "100", "sexo" : "Fêmea", "idade" : "20", "bigdata" : { "abortos" : [ { "data_aborto" : ...

What is the best way to determine if any of the list items (li's) have been marked as selected?

<div id='identifier'> <ul id='list'> <li id='1' class="">a</li> <li id='2' class="">a</li> <li id='3' class="">a</li> <li id='4' class=" ...

Navigating through Leaflet to reference a .json file

Looking to integrate a .json vector layer into a Leaflet.js map, which can be seen on the GitHub page here, with the source code available here. Here's a condensed version of the file for reference (full version visible on the linked GitHub page). & ...