cannot find module 'react' or 'next/dist/compiled/next-server/app-page.runtime.dev.js'

Unanswered

Tomistoma posted this in #help-forum

TomistomaOP

2023-10-02T14:52:42.000Z

Update: For anyone reading, I had trouble with npm so I am using Yarn, which is working for me :)

Hey there, trying to get nextjs app running on Windows using 'next dev'. But getting a couple errors, as seen in the title of post. It's keeping me from loading localhost:3000 correctly

here is require stack 1:
Error: Cannot find module 'next/dist/compiled/next-server/app-page.runtime.dev.js'
Require stack:
- C:\Users\jonsh\Documents\Dev\react\grider\test-next-app.next\server\app\page.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\require.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\load-components.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\build\utils.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\dev\hot-middleware.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\dev\hot-reloader-webpack.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\router-utils\setup-dev.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\router-server.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\start-server.js

and require stack 2:
Error: Cannot find module 'react'
Require stack:
- C:\Users\jonsh\Documents\Dev\react\grider\test-next-app.next\server\pages_document.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\require.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\load-components.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\build\utils.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\dev\hot-middleware.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\dev\hot-reloader-webpack.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\router-utils\setup-dev.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\router-server.js
- C:\Users\jonsh\AppData\Roaming\npm\node_modules\next\dist\server\lib\start-server.js

I am coming from following a course that had me using create-react-app to learn from, and I don't want to use that, so I'm trying to use nextjs instead to create projects to follow along with the course.

PS. screenshot is what shows up on localhost:3000 browser window

90 Replies

TomistomaOP

2023-10-02T14:53:43.000Z

Here is my package.json file

{
    "name": "test-next-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "react": "latest",
        "react-dom": "latest",
        "next": "latest"
    },
    "devDependencies": {
        "eslint": "latest",
        "eslint-config-next": "latest"
    }
}

And i notice there is no node_modules folder in a nextjs project, so i'm not really sure how to check if react is in there or not

Dunker

2023-10-02T14:58:40.000Z

just npm i

TomistomaOP

2023-10-02T14:59:06.000Z

i've tried, it says its up to date

its normal for nextjs .js files to not have anywhere thats importing react or reactdom?

i can't find where itd import it

Dunker

2023-10-02T15:00:26.000Z

yea normal

French Lop

2023-10-02T15:00:29.000Z

try to delete the next folder

TomistomaOP

2023-10-02T15:01:33.000Z

tried both, npm i just says its up to date already

Dunker

2023-10-02T15:01:59.000Z

just do ctrl+shift+f and search for React

TomistomaOP

2023-10-02T15:02:44.000Z

only finding it in vscode in the package.json

no where else i see in the files

have tried creating a few different projects with/without typescript, tailwind, routes, etc

Dunker

2023-10-02T15:04:26.000Z

and

TomistomaOP

2023-10-02T15:04:48.000Z

i get different errors since i dont have typescript installed etc

never used it yet

Dunker

2023-10-02T15:05:37.000Z

do you want to start a session via live share in vscode

TomistomaOP

2023-10-02T15:05:50.000Z

sure!

oh btw when i try and do create-react-app

it creates a package.json file with nothing in it, and thats it

{
"name": "my-app-haha",
"version": "0.1.0",
"private": true
}

i dont know why nothing is creating what it needs haha

Dunker

2023-10-02T15:06:58.000Z

https://tenor.com/view/kersemus-laptop-gooien-pc-smash-gif-19327201

TomistomaOP

2023-10-02T15:07:56.000Z

how do we do live vs code? just call u on discord?

Dunker

2023-10-02T15:08:07.000Z

no just share that link with me

f1 > start a new session etc

French Lop

2023-10-02T15:10:00.000Z

node version?

TomistomaOP

2023-10-02T15:10:23.000Z

v18.18.0

@Dunker f1 > start a new session etc

TomistomaOP

2023-10-02T15:10:35.000Z

says itis starting it

@Tomistoma says itis starting it

Berger Picard

2023-10-02T15:11:43.000Z

try
npm ci

@Dunker no just share that link with me

TomistomaOP

2023-10-02T15:12:21.000Z

dm'd

@Berger Picard try `npm ci`

TomistomaOP

2023-10-02T15:12:53.000Z

npm ERR! code ECIGLOBAL
npm ERR! npm ci does not work for global packages

npm ERR! A complete log of this run can be found in: C:\Users\jonsh\AppData\Local\npm-cache_logs\2023-10-02T15_12_36_578Z-debug-0.log

note: i am on windows using powershell

Berger Picard

2023-10-02T15:13:49.000Z

are you sure you are on the correct directory?

cd "C:\Users\jonsh\Documents\Dev\react\grider\" && npm ci

TomistomaOP

2023-10-02T15:15:50.000Z

PS C:\Users\jonsh\Documents\Dev\react\grider> npm ci
npm ERR! code ECIGLOBAL
npm ERR! npm ci does not work for global packages

npm ERR! A complete log of this run can be found in: C:\Users\jonsh\AppData\Local\npm-cache_logs\2023-10-02T15_15_31_692Z-debug-0.log

i made a project inside grider called test-next-app

Berger Picard

2023-10-02T15:19:13.000Z

if you are not sharing the project with anyone else you may want to delete:
- .next
- node_modules
- package-lock.json (or equivalents from other bundlers)
then run npm i again

TomistomaOP

2023-10-02T15:21:56.000Z

well the weird thing is there is no package lock nor node_modules

on root dir

unless its hiding in .next

i tried deleting .next and running npm i again, no success

Berger Picard

2023-10-02T15:23:21.000Z

have you got a package.json at least?

TomistomaOP

2023-10-02T15:24:32.000Z

ya it looks like this

{
  "name": "nextapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "next": "latest"
  }
}

Berger Picard

2023-10-02T15:25:23.000Z

weird

if your project is not so big you may want to start over from a clean next install and move your components and stuff over

TomistomaOP

2023-10-02T15:25:49.000Z

tried using react version numbers too

yeah thats what im doing now. ive created like 10 projects. cant get it to run

Berger Picard

2023-10-02T15:27:09.000Z

have you tried any other pm? like pnpm/yarn/bun?

maybe your npm is corrupt somehow

TomistomaOP

2023-10-02T15:28:26.000Z

im not sure. it seems ok

but no i havent ever used yarn etc

my npm has been fine with an express app i made last week

TomistomaOP

2023-10-02T16:01:19.000Z

there is some deeper issue cus even npx create-react-app 'project name' only creates a folder with a package.json in it with no dependencies in it at all. and thats it in the whole app. something is messed up. not sure how to reset it

Clown

2023-10-02T16:08:25.000Z

I don't know man your npm haunted or something ðŸ˜

Cause there should be a node_modules folder AND a package lock file.

If it isnt showing that then there is something wrong with your installation or something

Node latest LTS shouldn't be giving you these problems from what ik

TomistomaOP

2023-10-02T16:09:52.000Z

npm is haunted

because i just npm installed yarn

and yarn now works with create-react-app and next js

and it created the node modules folder in next js app

and now running yarn dev loads the page correctly

not sure how to revert npm. any advice appreciated ðŸ™‚

Clown

2023-10-02T16:12:34.000Z

Remove npm completely and reinstall

TomistomaOP

2023-10-02T16:12:37.000Z

correction: i uninstalled create-react-app, i think yarn uses a different thing. not sure

so how does uninstallint npm

and then checking its version

still return something ðŸ˜„

Clown

2023-10-02T16:14:55.000Z

Lol

Since thats Mingw are you on windows?

If you are just uninstall it like you would other apps.

TomistomaOP

2023-10-02T16:16:23.000Z

yep just tried

ya im switching between it and powershell

idk if they have different perms so trying everything

Clown

2023-10-02T16:17:52.000Z

No no, dont use npm to uninstall npm

Uninstall using the settings

TomistomaOP

2023-10-02T16:18:28.000Z

i just reinstalled node

npx still giving issue. not using create-react-app or create next app correctly

wont create node-modules folders etc

only yarn will

Clown

2023-10-02T16:19:40.000Z

I don't know man. Maybe some config or something remaining behind

Either way its a issue on your side most likely

TomistomaOP

2023-10-02T16:20:23.000Z

oh for sure, just not sure why

TomistomaOP

2023-10-02T16:30:53.000Z

npm install express --save doesnt modify an existing package.json file either, which it should right?

sorry off topic but

trying to figure out why yarn can write files and such but npm can't

i also have write access in npm-cache in appdata/local

guess ill just yarn from here on out for now. hopefully it doesnt cause issues.