I am getting errors as specified below. i don't know where i am going wrong.please help me out. I have changed my webpack config also and i have also updated react-hot-webpack loader also but still i am getting these errors..

Thanks in advance.

these are the errors i am getting.

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

this is my react code

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;

and this is my 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' }
}
};

I am getting errors as specified below. i don't know where i am going wrong.please help me out. I have changed my webpack config also and i have also updated react-hot-webpack loader also but still i am getting these errors..

Thanks in advance.

these are the errors i am getting.

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

this is my react code

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;

and this is my 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' }
}
};

• javascript
• reactjs

• How does your package.json look like? Did you add the 'react-redux' dependency? – nagyf Commented Feb 6, 2017 at 13:19
• Ya i have just installed only redux..now i have installed react-redux..thank you..but what's the difference?? – Abhilash Muttalli Commented Feb 6, 2017 at 13:26
• react-redux gives you access to the Provider and Connect components as well as the ability to map redux state to props and action creators to dispatch. These components mean that you can connect some of your React components to the Redux store. Since these are react components the author decided that they should be in their own library and not in the redux library. – therewillbecode Commented Feb 6, 2017 at 13:45
• I have another error in my code as Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(Createstudent))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Form(Createstudent))". How do i fix this error? – Abhilash Muttalli Commented Feb 7, 2017 at 4:14

6 Answers 6

npm install react-redux  --save

This should solve the issue

I think you haven't installed 'react-redux' package. make sure it is in your package.json file. and if it is not present there please install it using 'npm install --save react-redux'

So I encountered this problem trying to integrate redux-form to react-boilerplate.

This can be related to the situation when you try to use redux-form with the Redux store configured to use ImmutableJS objects.

Please, refer to the docs. Since versions 6 this is officially supported.

TL;DR

1) you must have special imports:

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

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

2) you should keep in mind non-standard objects nature while implementing validation:

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

it works for me by running these two commands

npm install react-redux  --save

then have to run second command

npm install --save redux-form

If you are using "@reduxjs/toolkit". and you are getting this error.

Then no need to add the redux to the packages.json.

Just you need these "@reduxjs/toolkit" and "react-redux".

To resolve the issue, delete all the folders from node_modules and do a npm i.

It will resolve the things.

Sample 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"
  }

This solved the issue for me.

npm install --save redux-form