vue ui showing Error: NO_MODULES when creating a project (windows) - vue.js

I could see the GUI on the browser when I run vue ui command, and then when creating a project, I selected the npm as the Package Manager from the dropdown list and on the Preset section I chose the default (babel, eslint), but when I click on Create Project button I get NO_MODULES error. I then checked the terminal to see this error below
$ vue ui
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
Error: NO_MODULES
at importProject (C:\Users\xxxx\AppData\Roaming\npm\node_modules#vue\cli\node_modules#vue\cli-ui\apollo-server\connectors\projects.js:363:11)
at progress.wrap (C:\Users\xxxx\AppData\Roaming\npm\node_modules#vue\cli\node_modules#vue\cli-ui\apollo-server\connectors\projects.js:355:12)
at process._tickCallback (internal/process/next_tick.js:68:7)
$ node --version
v10.16.2
$ vue --version
#vue/cli 4.1.2
Please advise what should be done.

Check your NODE_ENV
echo $NODE_ENV
NODE_ENV=development

Related

What is an example of a boilerplate A-Frame 1.0.4+ component project with working tests?

I'm looking to have basic testing of an A-Frame component to verify the modifications it makes to the scene and DOM.
I have attempted to use the angle repo https://github.com/ngokevin/angle to init a new component which includes pre-configured tests with karma, as recommended by this post: Writing test specs for A-Frame
However the default test in angle does not run, resulting in this error in the console:
You need to include some adapter that implements __karma__.start method!
Is there any example of a working A-Frame component test that I can build from?
I was able to get the tests to run successfully using the angle repo when I also add envify and browserify-css by running npm install --save envify browserify-css to the new project. Now the sample test is running.
Here are the complete steps that resolved this issue:
I made a new directory for my project and navigate there. I did npm init in that directory and entered some info about my project.
Then I ran npm install angle (I tried sudo npm install -g angle but it didn't work.)
Then I ran node ./node_modules/angle/index.js initcomponent and entered in some info about my new component.
Then I had to navigate to the newly created subdirectory. Then I ran npm install
Then I run npm install --save envify browserify-css
Then I run npm run test
Then I see SUMMARY: ✔ 2 tests completed

Failed to Compile After Installing Vuetify with Vue CLI 3

I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.

'vue' is not recognized as an internal or external command,operable program or batch file

Node version : v8.11.4
npm version: 5.6.0
Commands fired
npm install -g vue-cli
npm install -g vue
vue install wepack test
Following error is thrown
'vue' is not recognized as an internal or external command,operable program or batch file.
When I type vue -v also, I am getting the above error
I also added to windows the path of Vue.js
I also noticed that vue.cmd is not coming the following directory
C:\Users\HP\AppData\Roaming\npm
Can anybody please help me to sort the problem
I solved my problem by not running my command terminal as an administrator. I opened my cmder terminal normally by double clicking and it worked.

Vue Cli's default has console errors?

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.

Babel Errors in Cloud 9 IDE

Getting a bunch of babel errors when running npm run dev with the Vue cli.
This only happens in Cloud9.
Any thoughts on what could be the issue or how to disable errors like this before running npm run dev?
All babel related it looks like.
I couldn't re-create the babel error messages but it's possible that it could be caused if npm/node is not up-to-date. (Vue-cli wasn't starting dev server before the installation below)
Is your repository public where you're getting the error messages? Then I could have a look at the errors.
If removing node_modules folder is not helping,
here is how you can create a new IDE workspace for vue.js ($ for commands in bash terminal):
Create a blank Ubuntu workspace
Check that nvm is installed & up-to-date with (check version of install script here):
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ nvm install node 6
$ npm i vue-cli -g
$ vue init webpack yourAppName
$ cd yourAppName
$ npm install
$ npm run dev
Click preview to test that Vue server is running as expected
Here is a link to a HelloWorld Vue app in cloud9 ide.
If you have an existing app you can also use git to clone it into your new workspace instead of creating a new app.