I am trying to build a spotify-clone using NextJS 12 and tailwind css template.
I used this command to create the project : npx create-next-app -e with-tailwindcss spotify-2.
The project was created susscessfully but as I ran npm run dev after doing a cd spotify-2, I am getting the following error :
> # dev /home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:14702) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined
at /home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:67:19
at Object.<anonymous> (/home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:900:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/writer.browser.server.js:6:20)
(node:14702) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14702) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
ReferenceError: TextEncoder is not defined
at /home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:67:19
at Object.<anonymous> (/home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:900:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/aishik-ubuntu/MEGAsync/Programming On Ubuntu/My Projects/NextJS Projects/spotify-2/node_modules/next/dist/compiled/react-server-dom-webpack/writer.browser.server.js:6:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/aishik-ubuntu/.npm/_logs/2021-11-26T18_33_22_412Z-debug.log
What should I do now?
I had the same error but with the typescript template
npx create-next-app#latest --typescript
I was running a very old node version 10. I upgraded to version 16 LTS and then it ran without error. You can check your version with this command:
node -v
System requirements on the site state node version 12.22.0.
https://nextjs.org/docs/getting-started#system-requirements
Related
I'm using below url to start bootstrap 4 with gulp:
https://coursetro.com/posts/design/72/Installing-Bootstrap-4-Tutorial
But I got below Error when i run gulp command.
ReferenceError: primordials is not defined
at fs.js:39:5
at req_ (X:\Users\pradeep.patel\Desktop\PP\Website\PP\node_modules\natives\index.js:143:24)
at Object.req [as require] (X:\Users\pradeep.patel\Desktop\PP\Website\PP\node_modules\natives\index.js:55:10)
at Object. (X:\Users\pradeep.patel\Desktop\PP\Website\PP\node_modules\graceful-fs\fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:1185:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1205:10)
at Module.load (internal/modules/cjs/loader.js:1034:32)
at Function.Module._load (internal/modules/cjs/loader.js:923:14)
at Module.require (internal/modules/cjs/loader.js:1074:19)
at require (internal/modules/cjs/helpers.js:72:18)
I have run below commands, and issue resolved:
npm install -g minimatch (Enter)
npm install -g graceful-fs (Enter)
npm link gulp (Enter)
Thanks,
PP
When I try and run my mocha tests I get
$ npm t
> digitalAlarmClock#1.0.0 test /home/durrantm/Dropnot/code/js/mochaChai/digitalAlarmClock
> mocha *.test.js
internal/modules/cjs/loader.js:979
throw err;
^
Error: Cannot find module 'commander'
Require stack:
- /usr/lib/nodejs/mocha/bin/_mocha
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
at Function.Module._load (internal/modules/cjs/loader.js:859:27)
at Module.require (internal/modules/cjs/loader.js:1036:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/usr/lib/nodejs/mocha/bin/_mocha:10:17)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/usr/lib/nodejs/mocha/bin/_mocha' ]
}
npm ERR! Test failed. See above for more details.
How to fix?
here's how I solve the issue:
run npm list to see if there's any dependency missing, for example, I saw:
[root#d21b188bb7e1 configurable-http-proxy]# npm list
configurable-http-proxy#4.3.2 /srv/configurable-http-proxy
├── UNMET DEPENDENCY commander#~7.2.0
...
install it manually by
npm install --save commander#~7.2.0
This can happen for several different reasons.
In this case it is because mocha isn't installed.
Fix with
npm install --save-dev mocha
previously node was working properly.
After that as i wanted to install express & socket.io.
it asked for node version update.
i tried to update node version & i believe i forgot some command to run in updation process.
now it's giving following error on any npm command. even if i type only npm, that'll give error.
m#m-Lenovo-ideapad-320-15IKB:/var/www/html/chat$ npm -v
nternal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'semver'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/usr/share/npm/lib/utils/unsupported.js:2:14)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
Finally it got solved, i think following process worked.
deleted npm module from usr folder
I removed npm module
cleared the cache
installed npm
& it worked
The mistake i was doing was not clearing the cache
Encounters this error when running npm start on newly created create-react-app project:
Error: Cannot find module 'p-map'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\jeff ramos\Documents\web-dev\react-framework-intro-2\node_modules\webpack-dev-server\node_modules\del\index.js:8:14)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-framework-intro-2#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-framework-intro-2#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Have you tried
npm install p-map
Before ask this question I searched the SO, get the bellow related post:
ReferenceError: resolve is not defined
But it is not fit my case, because mine is error on the webpack config, I don;t know why get this issue.
When I use the npm run build, I get the bellow error:
/Users/ldsole/Desktop/my-project/web/wx_backup/webpack.base.config.js:51
use: ExtractTextPlugin.extract({
^
ReferenceError: resolve is not defined
at Object.<anonymous> (/Users/luowensheng/Desktop/my-project/web/wx_backup/webpack.base.config.js:51:40)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/luowensheng/Desktop/my-project/web/wx_backup/webpack.prod.config.js:5:27)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wx_backup#1.0.0 build: `webpack --progress --hide-modules --config webpack.prod.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wx_backup#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/lasdas/.npm/_logs/2018-04-08T05_51_10_773Z-debug.log
You see the npm ERR! This is probably not a problem with npm. There is likely additional logging output above., I don't know where why get the error.
My cause error code (webpack.base.config.js) is bellow:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ // there is the error line.
use: ['css-loader?minimize', 'autoprefixer-loader'],
fallback: 'style-loader'
})
},