5

I am practicing React Redux by creating a Blogpost App. I have encountered a problem while creating new post component. I have installed axios,redux-promise. I have installed react-router 4.0.0, react-router-dom 4.2.2, redux-form 6.6.3

1.This is my src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import promise from "redux-promise";

import reducers from "./reducers";
import PostIndex from "./components/posts_index";
import PostsNew from "./components/posts_new";

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
  <div>
    <Switch>
      <Route path="/posts/new" component={PostsNew} />
      <Route path="/" component={PostIndex} />
    </Switch>
  </div>
</BrowserRouter>
</Provider>,
document.querySelector(".container")
);

2.This is my actions/index.js

import axios from "axios";

export const FETCH_POSTS = "FETCH_POSTS";

const ROOT_URL = "http://reduxblog.herokuapp.com/api";
const API_KEY = "?key=SHUVRO1234";

export function fetchPosts() {
const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);
return {
type: FETCH_POSTS,
payload: request
};
}

3.This is reducers/index.js

import { combineReducers } from "redux"; 
import { reducer as formReducer } from "redux-form";
import PostsReducer from "./reducer_posts";

const rootReducer = combineReducers({
posts: PostsReducer,
form: formReducer
});

export default rootReducer;

4.This is the action reducer

import _ from "lodash";
import { FETCH_POSTS } from "../actions";

export default function(state = {}, action) {
switch (action.type) {
case FETCH_POSTS:
return _.mapKeys(action.payload.data, "id");
default:
return state;
}
}

5.This is the posts_new component where error showed

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";

class PostsNew extends Component {
renderTitleField(field) {
return (
<div>
<input type="text" {...field.input} />
</div>
);
}
render() {
return (
<form>
<Field name="title" component={this.renderTitleField} />
</form>
);
}
}

export default reduxForm({ form: "PostsNewForm" })(PostsNew);

This is the error in console

bundle.js:20326 Uncaught Error: Cannot find module "hoist-non-react-statics"
at webpackMissingModule (bundle.js:20326)
at Object.<anonymous> (bundle.js:20326)
at Object.invariant (bundle.js:20624)
at __webpack_require__ (bundle.js:20)
at Object.exports.__esModule (bundle.js:19501)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:64)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:47)
at __webpack_require__ (bundle.js:20)

Please help me to solve this error

2
  • Given that that's a webpack error: did you remember to read all the README.md instructions for the packages you installed? Because one of them likely explains that it relies on special instructions in your webpack config, without which you'll be seeing errors like these. Oct 15, 2018 at 15:40
  • thanks,installing hoist-non-react-methods in npm solved the error
    – Suvra.D
    Oct 16, 2018 at 7:56

1 Answer 1

6

Just run "npm i hoist-non-react-statics" Hope it helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.