Vue Cli's default has console errors? - vue.js

I'm trying to create a project using Vue Cli using the following lines,
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
And in the console of the build, it has the following error,
Uncaught TypeError: Cannot read property 'indexOf' of null
at Object.extractShopifyDomain (content.min.js:14)
at Object.extractCurrentDomain (content.min.js:14)
at new <anonymous> (content.min.js:16)
at content.min.js:15
Is it an issue with the current Vue Cli or am I doing something wrong? I haven't touched any scripts or edited anything yet. How do I resolve this?

I encountered the same thing. Discovered it was the Coupons at Checkout chrome extension causing the error.

Try to update nodejs & npm. Remove node_modules folder and run npm install again. Maybe it will help.

Related

TypeError: Cannot read property 'NormalModule' of undefined

I am working on a big project and I cannot run it anymore because of this error:
When I run npm run serve
ERROR TypeError: Cannot read property 'NormalModule' of undefined
TypeError: Cannot read property 'NormalModule' of undefined
at VueLoaderPlugin.apply (/Users/<user>/muso-ninjas/node_modules/vue-loader-v16/dist/pluginWebpack5.js:44:47)
at webpack (/Users/<user>/muso-ninjas/node_modules/#vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
at serve (/Users/<user>/muso-ninjas/node_modules/#vue/cli-service/lib/commands/serve.js:163:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Please help me because I am stuck and I would like to go with my project.
Try this first:
In your project root, run npm install. Maybe someone else on your project has changed/added a dependency, and pulling from your git repo got you the code that relies on this, but won't get you the dependency itself.
If that doesn't fix your issue, try this:
Remove the node_modules folder in your project root.
Update your Node.js version to the latest 16.x version.
2.1 Verify the update has worked by issuing node -v in the terminal.
Update your npm: Run npm i -g npm in the terminal.
3.1 Very the update has worked by issuing npm -v in the terminal.
Run npm install in your project's root folder.
If this doesn't fix your issue, you need to find help from someone else on your team.
As suggested in link from the first comment, I deleted node_modules, replaced the node-sass in package.json with "sass": "^1.26.5" and ran npm install but it didn't work.
Then I repeated the steps and removed package-lock.json as well.
This helped and the app was served properly
npm install webpack#4.39.3 --save

How to fix error in "Copying template" when making project?

I'm generating a new project using React-Native in Command Prompt but I get an error when I use the following command:
react-native init Style
This is the result I get:
√ Downloading template
× Copying template
error Error: Cannot find module 'C:\Users\User\AppData\Local\Temp\rncli-init-template-srEvW0\node_modules\react-native\template.config'
error EBUSY: resource busy or locked, rmdir 'D:\FUSI\React Native\Style'. Run CLI with --verbose flag for more details.
Error: EBUSY: resource busy or locked, rmdir 'D:\FUSI\React Native\Style'
at Object.rmdirSync (fs.js:684:3)
at rmdirSync (D:\FUSI\React Native\node_modules\fs-extra\lib\remove\rimraf.js:276:13)
at Object.rimrafSync [as removeSync] (D:\FUSI\React Native\node_modules\fs-extra\lib\remove\rimraf.js:252:7)
at Object.initialize [as func] (D:\FUSI\React Native\node_modules\react-native\node_modules#react-native-community\cli\build\commands\init\init.js:295:26)
at process._tickCallback (internal/process/next_tick.js:68:7)
How can I fix this error?
Mustafa AK had it right. What worked for me is adding the --npm flag at the end of the command.
I followed the tutorial exactly how it was laid out on the React website and was running into the same error. For whatever reason, if you have yarn and npm installed the command to create a new project will not work. So you have to add the --npm flag to get it to only use npm and this will work.
npx react-native init AwesomeProject --npm
This Same error comes with me. But I solved by following ways...
First, uninstall the node from your system and download the latest version of node and install it.
2.after installation of the latest version of node you need to write the command in your command prompt
npm install -g react-native-cli
Now go to your project directory
cd your-react-native-project directory
now create your react-native project
react-native init your-project-name.
https://stackoverflow.com/a/71725307/16114216
Be sure uninstall global react-native/cli as described react-native tutorials
Try to use --npm end of init command if you had yarn and npm both.
npx react-native init MyApp --template react-native-template-typescript --npm
Note: If you have both yarn and npm installed on your machine, React Native CLI will always try to use yarn, so even if you use npx utility, only react-native executable will be installed using npm and the rest of the work will be delegated to yarn. You can force usage of npm adding --npm flag to the command.

Why do i get vue-cli errors while setting up a new project

I have npm installed v6.9.0 ,node v10.16.0 & yarn v1.16.0 on my Ubuntu 18.04LTS.
I'm following this tutorial.tutorial link
While I'm initially setting up the Vue app in my directory vuetest and bootstrapping the app using vue-cli, i ran these commands:
yarn global add vue-cli
vue init webpack <webpack_name>
Vue init hanged at project description and this was a issue in github where they posted a temporary solution.
temporary solution link
In the solution they said to run these commands:
1.cd "$(dirname $(which vue))/node_modules/#vue/cli-init"
2.npm i inquirer#~6.3.1
When i ran the first command i get error:
bash: cd: /home/nishanthr/.yarn/bin/node_modules/#vue/cli-init: No such file or directory
Output of which vue is:
/home/nishanthr/.yarn/bin/vue
Can someone tell me what's wrong and what's happening here ?
You should use the new version yarn global add #vue/cli
Vue Cli

Vue-cli 3: "command failed: npm install --loglevel error"

Every time I try to create a new project (vue create my-project), I get this error:
ERROR : command failed: npm install --loglevel error
I'm on PC / Windows 10, Vue-cli 3.2.1, Node 8.11.3, Npm 5.6.0.
Presets:
Babel, ESLint & Prettier, SASS, Vue router, Vuex
From the log:
2736 silly saveTree `-- vuex#3.0.1
2737 warn ajv-keywords#2.1.1 requires a peer of ajv#^5.0.0 but none is
installed. You must install peer dependencies yourself.
2738 verbose stack Error: EINVAL: invalid argument, read
Any idea what that means and how to solve it?
EDIT: I figured out that excluding any lint feature makes the problem disappear. So the question becomes: how can I still use linting and make it work?
Try
npm cache clean --force
If it doesn't work then manually delete %appdata%\npm-cache folder. Then try to create the project again.
Try pointing the npm registry url from 'https' to 'http'
Run following command :
npm config set registry="http://registry.npmjs.org/"
Then try creating vue project :
vue create my-project
It worked for me.
OR
Try :
sudo npm cache clean -f
npm update
npm update -g #vue/cli
vue create vue-first-app
I've tried everything above but still the error kept occuring. Finally I upgraded my npm version and node version, both to the latest ones and it worked.
Try using 'Dart-Sass' instead of using 'Node-Sass'. This will create your Vue project without any errors.
I am using "vue-cli 3.0.0-rc.1", I solve the problems by setting the ~/.vuerc from "useTaobaoRegistry": true, to false. Hope it help to you!!
The reason behind the error is , u are having an outdated version of node js. Try to reinstall node js and the probelm will get fixed("dont forget to uninstall and clear all the node js file before re-installing ")
I am using vue-cli 3.7.0-rc.1, I solve the problems by editing the ~/.vuerc from "useTaobaoRegistry": false to true.
Hope it works for you!
change permission by using the cli
npm config set unsafe-perm true
The problem is on the CLI
npm cache clean --force
%appdata%\npm-cache Just run on the "Run" Then Delete all the files
npm install -g #vue/cli
Just use npm 6 or greater
vue create projectName
problem solved 100% work for me
cheers
If you run into this issue on a Mac or Linux machine, you may simply need to sudo.
sudo vue create my-project
If you run into it on Windows, you may resolve the issue by running the terminal as admin.
I had the same issue. You have to use the command vue config --set useTaobaoRegistry false. After that it worked for me.
I had same issue when i was installing vue-cli with npx .... tried all the solutions from google.. nothing worked for me ..
so then i moved to install vue-cli with yarn package manager
thats when i figured out the issue ..
my issue was basically my node version which was 8.x.x but yarn was expecting 10.x.x
with nvm i have installed latest node which is 16.x.x
then tried installing vue-cli with yarn ..
it worked like charm!!!!
Source: https://medium.com/tableless/sass-vs-stylus-28c7e2884f1a
base language
Sass: Ruby
Stylus: JavaScript
Take out sass and use stylus. It will work.
I had the same issue using Ubuntu 20.04 OS. I used the command
npm install --loglevel error --legacy-peer-deps
and it worked for me.
Likely issue is your proxy settings:
I was having this issue recur intermittently and in the end I found out it was being caused by network proxy issues. See this article on how run npm behind a proxy server

Problems while setting up vue-cli

I'm trying to install Vue-cli environemnt via NPM.
npm install --global vue-cli
After that I want to create project
vue init webpack my-project
And I get an error
'vue' is not recognized as an internal or external command,
operable program or batch file.
I've read some solutions, most of them concern changing
PATH to C:\Users{YourUser}\AppData\Roaming\npm
Didn't work for me. Can anyone help.
I follow these commands, It's work fine for me.
npm install -g vue-cli
npm install -g vue
Edit the System environment variables, and enter the following path, and if still having a problem just try to add a path in System User Variables
C:\Program Files\nodejs\node.exe;
C:\Users\{UserName}\AppData\Roaming\npm
Check vue installed in C:\Users{UserName}\AppData\Roaming\npm
yarn add #vue/cli-service
or
npm install #vue/cli-service
is what worked for me
Well, problem was solved by simply deleting everything related to vue-cli installed before. And re-installing vue-cli.
I have faced simillar issue and re-installing vue-cli didn't work for me. Strange thing is vue and vue-cli get installed successfully but once I tried to create project by using below command
vue init webpack myfirstproject
I get below error:
'vue' is not recognized as an internal or external command,operable program or batch file.
Tried various solutions but nothing worked for me. Please find my NPM and Node details below:
NPM version: 6.2.0
Node version: 8.7.0
Actually the issue was "vue-cli" is not supporting to my Node(8.7.0). It requires Node >=8.9. Once I upgraded my Node version. everything is working fine.
upgrading your Node version is the correct way to deal with this issue
I found this same issue with another possible problem. I had
create-react-app#1.5.2 installed globally
npm list -g --depth=0 will display your globals
I simply uninstalled create-react-app
npm uninstall create-react-app
Vue vue-cli-service now works as expected.
had the same issue, i deleted my node_modules and re-install and it worked
I had the same problem after searching a lot I found this solution:
You need to Add C:\Program Files\nodejs to your PATH environment variable. To do this follow these steps:
Use the global Search to go to "Environment Variables"
Click "Edit system environment variables"
Click "Environment Variables" in the dialog
In the "System Variables" box, search for Path and edit it to include C:\Program Files\nodejs.
You will have to restart any currently-opened command prompts before it will take effect.
I hope it works, good luck!
I was installing #vue/cli using yarn, i.e. I ran
yarn global add #vue/cli
Calling vue on windows did not work after the installation ('vue' is not recognized as an internal or external command)
What I needed to do was to add C:\Users\<MY USERNAME>\AppData\Local\Yarn\bin to path.
yarn global add #vue/cli did not work for me
So I removed using yarn global remove #vue/cli
Then I installed using npm install -g #vue/cli and its working fine.
1)Try to remove all the node files, npm and nvm files/folders.
2)Also, remove the PATH of node js and nvm from environment variables.
3)try commands:
node -v
npm -v
nvm -v
above commands only to make sure that all the entities related to node are uninstalled.
4) install node, and if necessary install nvm(optioal), then run command
npm install -g #vue/cli
above procedure proven to be useful for me. Just give it a try!
for Yarn -> need to install it:
npm install -g yarn
Installing Vue CLI Package:
yarn global add #vue/cli
To create project:
vue create project-name
To run:
yarn serve
Uninstalling:
yarn global remove #vue/cli
I follow "npm" package manager instead of "yarn" package manager console because yarn give me a problem while installing it;
command to install Vue CLI:
npm install -g #vue/cli
For to create Vue project:
vue create "project-name"
For to run Vue project:
npm run serve