模块未找到：错误：无法解析模块'react-redux'。

Question

我遇到了以下所示的错误。我不知道哪里出了问题，请帮帮我。 我已更改webpack配置，并更新了react-hot-webpack加载器，但仍然遇到这些错误。

提前致谢。

以下是我遇到的错误：

ERROR in ./~/redux-form/lib/reduxForm.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/reduxForm.js 27:18-40

ERROR in ./~/redux-form/lib/values.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/values.js 9:18-40

ERROR in ./~/redux-form/lib/ConnectedField.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/ConnectedField.js 13:18-40

这是我的React代码

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
const reducers = {
  // ... your other reducers here ...
  form: formReducer     // <---- Mounted at 'form'
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)


class ContactForm extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <Field name="firstName" component={React.DOM.input} type="text"/>
        </div>
        <div>
          <label>Last Name</label>
          <Field name="lastName" component={React.DOM.input} type="text"/>
        </div>
        <div>
          <label>Email</label>
          <Field name="email" component={React.DOM.input} type="email"/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Decorate the form component
ContactForm = reduxForm({
  form: 'contact' // a unique name for this form
})(ContactForm);

export default ContactForm;

这是我的webpack配置

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules|lib\/ckeditor)/
      },
      {
        test: /\.s?css$/,
       loaders: ['style-loader','css-loader','sass-loader']
     }


    ]
  },
  resolve: {
  alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}
};

- Abhilash Muttalli

---

你的 package.json 文件长什么样子？你添加了 'react-redux' 依赖吗？ - nagyf

我刚刚安装了Redux，现在我也安装了React-Redux，谢谢。但是它们有什么区别呢？ - Abhilash Muttalli

react-redux为您提供了访问Provider和Connect组件的能力，以及将redux状态映射到props和操作创建者分派的能力。这些组件意味着您可以将一些React组件连接到Redux存储中。由于这些是React组件，因此作者决定它们应该在自己的库中而不是在redux库中。 - therewillbecode

我的代码中又出现了一个错误：Uncaught Error: 在 "Connect(Form(Createstudent))" 的上下文或属性中找不到 "store"。要么将根组件包装在 <Provider> 中，要么明确地将 "store" 作为属性传递给 "Connect(Form(Createstudent))"。我该如何修复这个错误？ - Abhilash Muttalli

Answer 1

npm install react-redux  --save

这应该可以解决问题。

- Vaibhav Singh

Answer 2

我认为您还没有安装'react-redux'包。请确保它在您的package.json文件中。如果没有，请使用'npm install --save react-redux'进行安装。

- Pradeepsinh Sindhav

Answer 3

通过运行这两个命令，它对我有效

npm install react-redux  --save

然后需要运行第二个命令。

npm install --save redux-form

- Suraj Patil

Answer 4

我在尝试将redux-form集成到react-boilerplate时遇到了问题。

这可能与您尝试使用ImmutableJS对象配置的Redux存储器使用redux-form的情况有关。

请参考文档。自版本6以来，官方已支持此功能。

TL;DR

1）您必须具有特殊的导入：

// reducer registration:
import formReducer from 'redux-form/immutable';

// form implementation:
import { Field, reduxForm } from 'redux-form/immutable' // <--- immutable import

2) 在实现验证时，您应该牢记非标准对象的特性：

const validate = values => {
  // IMPORTANT: values is an Immutable.Map here!
  const errors = {};
  if (!values.get('username')) {
    errors.username = 'Required'
  }
  return errors;

- wowkalucky

Answer 5

如果您正在使用"@reduxjs/toolkit"，并且遇到此错误。

那么不需要将redux添加到packages.json中。

您只需要这些"@reduxjs/toolkit"和"react-redux"。

为了解决这个问题，删除node_modules中的所有文件夹，然后运行npm i。

这将解决问题。

示例package.json

  "devDependencies": {
    "parcel": "^2.9.3",
    "postcss": "^8.4.31",
    "process": "^0.11.10",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.16.0"
  }

- KushalSeth

Answer 6

这对我解决了问题

npm install --save redux-form

- Nithin Samuel

---

欢迎来到SO。请考虑使用反引号``格式化您的代码。 - ABGR