Meep Meep
Meep Meep

Reputation: 21

"Module not found: Error: Can't resolve 'redux-thunk/extend-redux'"

This all started when I was trying to fix the "ThunkAction is not assignable to parameter of type 'AnyAction'." error in one of my actions. I added import 'redux-thunk/extend-redux';, it solved the issue, and then when I actually got to running the app, it gave me the module not found error.

The action ts in question:

import 'redux-thunk/extend-redux';
import { ThunkAction } from "redux-thunk";
import { RootState } from "..";
import { WeatherAction, WeatherData, WeatherError, GET_WEATHER, SET_ERROR, SET_LOADING } from "../types";

export const getWeather = (city: string): ThunkAction<void, RootState, null, WeatherAction> => {
    return async dispatch => {
        try {
            const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?id=${city}&appid=${process.env.REACT_APP_API_KEY}`);

            if(!res.ok) {
                const resData: WeatherError = await res.json();
                throw new Error(resData.message);
            }

            const resData: WeatherData = await res.json();
            dispatch({
                type: GET_WEATHER,
                payload: resData
            });
        }catch(err:any) {
            dispatch({
                type: SET_ERROR,
                payload: err.message
            });
        }
    }
}

export const setLoading = (): WeatherAction => {
    return {
        type: SET_LOADING
    }
}

export const setError =(): WeatherAction => {
    return {
        type: SET_ERROR,
        payload: ''
    }
}

package.json:

{
  "name": "onlyforecasts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.27",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "bulma": "^0.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "save": "^2.9.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-redux": "^7.1.25"
  }
}

I've tried a handful of redux commands, which didn't help, like

npm install --save Redux react-redux
npm install redux -- save
npm i redux -- save
npm install --save redux-thunk

Also a solution I saw where you manually replace the redux-thunk version and reinstall it but that also didn't work.

Any help is appreciated!

Upvotes: 1

Views: 317

Answers (0)

Related Questions