Getting a 'cannot find module' error in nextJS development build

user_13787246 0
Viewed 9991

I recently made a new github account and cloned the repo. It was working completely fine but after I cloned the repo with my new github account, I'm getting an error every time I do npm run dev. The error seems like related to webpack and I don't have next.config.js. Below is the error I'm getting.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
error - ./src/redux/store.js:1:0
Module not found: Can't resolve './node_modules/redux'
> 1 | import { createStore, applyMiddleware } from './node_modules/redux';
  2 | import { persistStore } from 'redux-persist';
  3 | import thunk from './node_modules/redux-thunk';
  4 | 
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./src/redux/store.js:1:0
Module not found: Can't resolve './node_modules/redux'
> 1 | import { createStore, applyMiddleware } from './node_modules/redux';
  2 | import { persistStore } from 'redux-persist';
  3 | import thunk from './node_modules/redux-thunk';
  4 | 
Error: Cannot find module 'path/.next/server/pages-manifest.json'

I tried delete node_modules and re-installed npm. Also, tried reinstall redux and react-redux but couldn't solve the problem.

I'll be appreciated for any help.

Thanks!

redux next.js reactjs
1 Answers

Please always import things by their name, not with a full node_modules path. Those packages could be anywhere on your disk - node will find them, you won't always make right assumptions.

So, you would use

import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

Also, nowadays I would recommend to look into the official Redux Toolkit, that will generally make Redux usage much easier for you and in this case would give you a completely preconfigured store by just calling

import { configureStore } from '@reduxjs/toolkit';
import someReducer from './someSlice';
import otherReducer from './otherSlice';

// thunks are already set up, as well as the devtools
export const store = configureStore({
  reducer: {
    some: someReducer,
    other: otherReducer,
  }
})

The best way to learn about modern redux (including redux toolkit) would be to follow the official Redux essentials tutorial

user_20759440
Related