Unable to create vue js project with "vue create projectName" command - vue.js

I try to runvue create my-project in my terminal, I've got this render :
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'rxjs'
Require stack:
- /usr/local/lib/node_modules/#vue/cli/node_modules/inquirer/lib/ui/prompt.js
- /usr/local/lib/node_modules/#vue/cli/node_modules/inquirer/lib/inquirer.js
- /usr/local/lib/node_modules/#vue/cli/lib/create.js
- /usr/local/lib/node_modules/#vue/cli/bin/vue.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/usr/local/lib/node_modules/#vue/cli/node_modules/inquirer/lib/ui/prompt.js:7:36)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/local/lib/node_modules/#vue/cli/node_modules/inquirer/lib/ui/prompt.js',
'/usr/local/lib/node_modules/#vue/cli/node_modules/inquirer/lib/inquirer.js',
'/usr/local/lib/node_modules/#vue/cli/lib/create.js',
'/usr/local/lib/node_modules/#vue/cli/bin/vue.js'
]
}
Whereas before, the command worked well!
Could someone help me to solve this problem?
Thanks in advance !

Related

Error: Cannot find module 'tailwindcss/colors'

Running npm run dev or npm run watch gives this error:
ERROR in ./node_modules/#uppy/core/dist/style.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!./node_modules/#uppy/core/dist/style.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/colors'
Heres the full error:
ERROR in ./node_modules/#uppy/core/dist/style.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!./node_modules/#uppy/core/dist/style.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/colors'
Require stack:
- C:\Projects\myapp\vendor\wireui\wireui\tailwind.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\tailwind.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\tailwindcss\lib\lib\setupTrackingContext.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\tailwindcss\lib\index.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\laravel-mix-tailwind\index.js
- C:\Projects\myapp\resources\views\themes\tailwind\webpack.mix.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\laravel-mix\setup\webpack.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\lib\bootstrap.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\bin\cli.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\Projects\myapp\vendor\wireui\wireui\tailwind.config.js:1:16)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)

How to solve the problem with installing npm install "Cannot find module #npmcli/git"?

How to fix it?
npm install swiper
Error: Cannot find module '#npmcli/git'
Require stack:
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\git.js
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\fetcher.js
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\index.js
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\lib\utils\update-notifier.js
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\lib\cli.js
C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\Oleg\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\git.js:6:13).js:6:13)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)

Why npm can't find module '../../package.json' even if it already exists

The problem: when I start using npm commands I see the same error:
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module '../../package.json'
Require stack:
- C:\Users\Demian\AppData\Roaming\npm\node_modules\npm\lib\utils\unsupported.js
- C:\Users\Demian\AppData\Roaming\npm\node_modules\npm\lib\cli.js
- C:\Users\Demian\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\Users\Demian\AppData\Roaming\npm\node_modules\npm\lib\utils\unsupported.js:2:19)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\Demian\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\utils\\unsupported.js',
'C:\\Users\\Demian\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli.js',
'C:\\Users\\Demian\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js'
]
}
The same problem with npm i, -v, init and etc. The same error is when I start it from C:/user or in a project with package.json where all works before. node works correctly. What should I do?

npm run build doesn't work - gulp-sourcemaps error

When I do npm install, I ran npm run build after and I got this error:
D:\Data\s20213-log210-03-lab0-ayoubmoudrika>npm run build
ets-log210-typescript-node-api#2.0.0 build
gulp build
Error: Cannot find module 'gulp-sourcemaps'
Require stack:
D:\Data\s20213-log210-03-lab0-ayoubmoudrika\gulpfile.js
D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\lib\shared\require-or-import.js
D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\lib\versioned^4.0.0\index.js
D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\index.js
D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp\bin\gulp.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:94:18)
at Object. (D:\Data\s20213-log210-03-lab0-ayoubmoudrika\gulpfile.js:4:20)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\Data\s20213-log210-03-lab0-ayoubmoudrika\gulpfile.js',
'D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\lib\shared\require-or-import.js',
'D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js',
'D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp-cli\index.js',
'D:\Data\s20213-log210-03-lab0-ayoubmoudrika\node_modules\gulp\bin\gulp.js'
]
}
Here is a screenshot

How to use ssr supported packages in vue with vue-server-renderer?

I tried to use vue2-google-maps and it worked well.
Suddenly my computer had stopped working and then I restarted my computer.
Then, strangely, 500-error comes out.
I reverted all codes associated with vue2-google-maps then my project works well.
Even though when I import vue2-google-maps then It occurs 500-error. :(
App.js
import * as VueGoogleMaps from 'vue2-google-maps';
It was working well but now cause of the unknown reason it has been broken...
Here is my console shows error.
webpack built 5410edae88d11b814c0b in 2690ms
error during render : /search
/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
<template>
^
SyntaxError: Unexpected token <
at Module._compile (internal/modules/cjs/loader.js:720:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)
error during render : /favicon.ico
/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
<template>
^
SyntaxError: Unexpected token <
at Module._compile (internal/modules/cjs/loader.js:720:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)
Is it possible that project that worked well could cause 500-error for no reason?
Environment: Ubuntu 18.04, npm v6.9.0, node v12.6.0

I have found how to handle ssr.
App.js
if (process.browser) {
const VueGoogleMaps = require('vue2-google-maps');
Vue.use(VueGoogleMaps, {
load: {
key: 'myKey',
libraries: 'places',
},
});
}
Instead of using import, I used require when it is client rendering.
I will be happy if it helped you. :D