模块未找到错误:包路径。/cjs/react.Development不从包导出

Question

在Reactjs中编译代码时，我得到了以下错误。我刚接触过Reactjs。

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>
  );
}

我尝试了npm更新，降级版本，但仍然相同的错误。

Answer 1

代码中的问题是，您使用的是从未从React导入的函数。

要解决这个问题，您需要导入从React中使用的函数。

为此，我们将使用一种名为树抖动的导入技术。这基本上是从导入中获取特定函数/变量的使用，而不是获取所有内容，并且只使用少量的东西。该技术大大提高了速度，减小了束的尺寸。

在您的React文件中，替换这一行代码：

import React from "react";

在这方面：

import React, { useState } from "react";

这将从React库导入useState函数。

如果您使用function中的另一个函数(例如useEffect)，那么您需要像导入useState一样导入它。

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

基本上，每次您需要从React导入一个函数/变量时，用大括号(,)中的逗号({})分隔它。

总之，要解决这个问题，您需要导入正在使用的函数/变量。