CODEWITHSUNDEEP
reactjsredux-thunkthunkredux-middlewarereact-thunk
Farooq Ahmed
Farooq Ahmed

Reputation: 21

I am getting an error while trying to import 'thunk' from 'redux-thunk'

I am new to React and Redux, and I am trying to build a webapp (authentication system) using React and Django. I am following a tutorial to do that, with this github directory. When I try to import thunk in Store.js from 'redux-thunk', it is returning me the following error on main page for React App (localhost:3000): ERROR in ./src/Store.js 8:20-25 export 'default' (imported as 'thunk') was not found in 'redux-thunk' (possible exports: thunk, withExtraArgument)

I have tried using '{ thunk }', this approach is giving me black page on main React App (localhost:3000).

Code: Store.js

import { legacy_createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import MainReducer from "./reducer/MainReducer";

const initialState = {}

const middleware = [thunk]

const Store = legacy_createStore(
    MainReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default Store;

Hompage of Redux App was expected if the import of thunk would have been successful, as shown in this video at 14:27 timestamp.

Upvotes: 1

Views: 590

Answers (1)

Farooq Ahmed
Farooq Ahmed

Reputation: 21

I have just fixed the problem. So putting the procedure here if anyone faces the same issue.

import { thunk } from 'redux-thunk'; is the right way, indeed. The primary issue was that I did not have 'Redux DevTools' installed on my browser as an extension. I installed it and it solved the issue partially. Then, in App.js, I mistakenly put "component" instead of "Component" in Routes, so correcting that too helped. I also re-installed packages that were involved in the development.

In a nutshell,

  • Install 'Redux DevTools' extension on your browser.
  • Try reinstalling / re-adding the packages, libraries involved and associated with the code blocks if not all of those involved in developing your software.
  • Be mindful of case-senstivity.

Without Redux DevTools running on browser, it given a blank page. I don't know why as I am a beginner. P.S. It is not in production environment yet.

Upvotes: 1

Related Questions