The module 'react' not installing on next.js although attempted with yarn and npm
Unanswered
Peeman Arthur posted this in #help-forum
I have attempted to install react.js but error persists saying
Error peema@DESKTOP-6UGCO8V MINGW64 /C/Users/peema/Documents/blockchaincenter
$ next build
The module 'react' was not found. Next.js requires that you include it in 'depen
dencies' of your 'package.json'. To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'd
ependencies' of your 'package.json'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
Require stack:
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\server\re
quire-hook.js
a) I have tried opening permissions to directories to allow access to files
b) attempted installation with yarn and npm
c) attempted changing tsconfig tsx to jsx-runtime
Error peema@DESKTOP-6UGCO8V MINGW64 /C/Users/peema/Documents/blockchaincenter
$ next build
The module 'react' was not found. Next.js requires that you include it in 'depen
dencies' of your 'package.json'. To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'd
ependencies' of your 'package.json'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
Require stack:
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\server\re
quire-hook.js
a) I have tried opening permissions to directories to allow access to files
b) attempted installation with yarn and npm
c) attempted changing tsconfig tsx to jsx-runtime
26 Replies
Can I see your
package.json?i made a mistake with the directory although issue is the same
Error: peema@DESKTOP-6UGCO8V MINGW64 /C/Users/peema/Documents/freshboy/peeapp
$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'.
To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.js
on'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'.
To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.js
on'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
Package.json:
This is the package.json sent. Thanks
is it the same directory where your next.js application is? (Not a monorepo or something)
no same directory, it is in the peeapp directory
the other installations work so the package installations worked however react had an issue for some reason
i installed via yarn first and attempted again via npm
@fuma is it the same directory where your next.js application is? (Not a monorepo or something)
I just attempted another attempt to install via this command. Error: peema@DESKTOP-6UGCO8V MINGW64 /C/Users/peema/Documents/freshboy/peeapp
$ yarn add react react-dom react/jsx-runtime
yarn add v1.22.15
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advi
sed not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files
. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://git@github.com/react/jsx-runtime.git
Directory: C:\Users\peema\Documents\freshboy\peeapp
Output:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
$ yarn add react react-dom react/jsx-runtime
yarn add v1.22.15
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advi
sed not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files
. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://git@github.com/react/jsx-runtime.git
Directory: C:\Users\peema\Documents\freshboy\peeapp
Output:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
just added the jsx-runtime to see if anything could be different
Try removing the node_modules/caches/folders generated by yarn, and do a re-install with npm
Okay let me try that
@fuma Try removing the node_modules/caches/folders generated by yarn, and do a re-install with npm
peema@DESKTOP-6UGCO8V MINGW64 ~/Documents/freshboy/peeapp
$ npm run build
npm ERR! code ENOENT
npm ERR! syscall spawn C:\Users\peema\AppData
npm ERR! path C:\Users\peema\Documents\freshboy\peeapp
npm ERR! errno -4058
npm ERR! enoent spawn C:\Users\peema\AppData ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: C:\Users\peema\AppData\Loca
l\npm-cache_logs\2023-08-11T15_47_43_866Z-debug-0.log
$ npm run build
peeapp@0.1.0 build
next build
npm ERR! code ENOENT
npm ERR! syscall spawn C:\Users\peema\AppData
npm ERR! path C:\Users\peema\Documents\freshboy\peeapp
npm ERR! errno -4058
npm ERR! enoent spawn C:\Users\peema\AppData ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: C:\Users\peema\AppData\Loca
l\npm-cache_logs\2023-08-11T15_47_43_866Z-debug-0.log
peema@DESKTOP-6UGCO8V MINGW64 ~/Documents/freshboy/peeapp
$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies
' of your 'package.json'. To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependen
cies' of your 'package.json'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
Require stack:
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\server\require-h
ook.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\utils.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\entries.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\index.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\cli\next-build.j
s
$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies
' of your 'package.json'. To add it, run 'npm install react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependen
cies' of your 'package.json'. To add it, run 'npm install react-dom'
uncaughtException Error: Cannot find module 'react/jsx-runtime'
Require stack:
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\server\require-h
ook.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\utils.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\entries.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\build\index.js
- C:\Users\peema\AppData\Local\Yarn\Data\global\node_modules\next\dist\cli\next-build.j
s
issue persisting
package.json:
Okay currently at an improved step now .
Diagnosing Next.js installation process and failure and next build failure.
Installation process that worked in a breakdown
Diagnosing Next.js installation process and failure and next build failure.
Installation process that worked in a breakdown
PRECHECK
a)After opening all permissions to avoid permission restriction and fail
b)If permission issue- then set permission to Everybody, or User on your windows or PC(rather than everybody)
c) Check anti virus issues
a)After opening all permissions to avoid permission restriction and fail
b)If permission issue- then set permission to Everybody, or User on your windows or PC(rather than everybody)
c) Check anti virus issues
INSTALLATION
1. yarn global add create-next-app- (to make it accessible and to create binary )
2. npm install -g npm@latest - (to make it ready for npm files _
3. yarn create next-app peeapp - (create project )
4. yarn global bin -(to check binary - check binary path)
5. yarn global list - (check if project exist in global list)
6. create-next-app peeapp - (this is what creates the project)
1. yarn global add create-next-app- (to make it accessible and to create binary )
2. npm install -g npm@latest - (to make it ready for npm files _
3. yarn create next-app peeapp - (create project )
4. yarn global bin -(to check binary - check binary path)
5. yarn global list - (check if project exist in global list)
6. create-next-app peeapp - (this is what creates the project)
PATH FIXES
1. If you have path error, put the path of the project and the bin directory in the System Environment Variables both as a Users & System
2. Check for the binary. Eg C:\Users\peema.yarn-global\bin and you can place it in Path at the the System or User Environment Variables
1. If you have path error, put the path of the project and the bin directory in the System Environment Variables both as a Users & System
2. Check for the binary. Eg C:\Users\peema.yarn-global\bin and you can place it in Path at the the System or User Environment Variables
PROBLEM: NEXT BUILD REACT ERROR AND INSTALLATION ERRORS FOR NEXT BUILD
**However there is an issue, next.js installs the project in the directory where you run the create-next-app command
(rightly so). but a problem with 'next build' occurs
**However there is an issue, next.js installs the project in the directory where you run the create-next-app command
(rightly so). but a problem with 'next build' occurs
Let's take the two path
a) C:\Users\peema\Documents\alert\peeapp\node_modules
b) C:\Users\peema\node_modules
The project was installed in peeapp folder hence the node_modules(C:\Users\peema\Documents\alert\peeapp\node_modules) but (next build ) calls the second path (C:\Users\peema\node_modules ) is called
So packages like react, next and others cannot be found since they are not in the second path but were installed in the first.
a) C:\Users\peema\Documents\alert\peeapp\node_modules
b) C:\Users\peema\node_modules
The project was installed in peeapp folder hence the node_modules(C:\Users\peema\Documents\alert\peeapp\node_modules) but (next build ) calls the second path (C:\Users\peema\node_modules ) is called
So packages like react, next and others cannot be found since they are not in the second path but were installed in the first.
SOLUTION :
Copy all packages that are not in the first node_modules to the second, so that those packages can be found.
Copy all packages that are not in the first node_modules to the second, so that those packages can be found.
Curent problem:
peema@DESKTOP-6UGCO8V MINGW64 ~/Documents/alert/peeapp
$ next build
- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
[= ] - info Generating static pages (0/4)TypeError: Cannot read properties of null
(reading 'useContext')
at exports.useContext (C:\Users\peema\Documents\alert\peeapp\node_modules\react\c
js\react.production.min.js:24:118)
peema@DESKTOP-6UGCO8V MINGW64 ~/Documents/alert/peeapp
$ next build
- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
[= ] - info Generating static pages (0/4)TypeError: Cannot read properties of null
(reading 'useContext')
at exports.useContext (C:\Users\peema\Documents\alert\peeapp\node_modules\react\c
js\react.production.min.js:24:118)