npm run serve gets hang on 98% while building - npm

I'm working on a project using vuetify. I was using "npm run serve" command to build and run a live server. it was working all good until all of sudden my project stopped building. every time i try running the command "npm run serve" it builds and hangs on 98% without throwing an error.
i tried npm install. npm build none of these fix the issue
in my terminal i run this command and the result is as follows:
npm run serve
rep-vuetify#0.1.0 serve /Users/Desktop/rg21-vuetify/rep-vuetify vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
IT hangs on 98% and don't do anything after this, been stuck on this step for whole week if some one can help me.

I have same problem stuck in 98%.
98% after emitting CopyPlugin
In my case, I recheck again my code, and I found my import path is invalid, something like :
import { myComponent } from ''
After fix the code, It works again.

I my case the problem is a empty require
getBackground() {
return `url(${require("")})`;
},

In Vue, if you have multiple HTML elements of a component/view not contained within a single element (eg. this DIV) the building will froze/halt unexpectedly.
Get sure to have all items contained within a section, div, etc.
Probably, NPM has nothing to do with this particular problem.
<template>
<div class="contain-all-stuff">
<!-- Anything inside this one single DIV container -->
</div>
</template>

If you are installed ESLint.
Try to run "npm run lint" command before you run "npm run serve"
it worked for me.

Try to update you NPM to the latest version and run your CLI as admin if you are using windows I have faced the same problem before.

Which version of NPM you are using?
I was getting the same issue with node version 12.6.0.
After node version updated to the 12.9.1, the issue is resolved for me.

I got the same error message, but I resolved it.
In my case, I just change different branch. after that, I change back the original branch, then it doesn't work when I run "npm run serve".
The problem is all import paths are case sensitive!
So when I change to the old branch, it changes my directory name to uppercase letters( before I use uppercase directory name). But the latest branch I already changed to lowercase letters for directory name.
For example, if your import like below:
component: () => import('#/views/test/Test'),
then you should check the directory's name and file's name must be the same uppercase letters and lowercase letters.

For anyone still having this problem past 2020, check everything in your Vuex index.js page and ensure that all the paths to you modules are correct. One of mine was incorrect and it took me an hour to figure it out. It might not be empty, so a search like suggested above will not help you in this case.

I had the same issue.. but the % the build was freezing was variable.
For me it was one stupid > that was missing in a closing div-tag..
Just wondering why I did not get an error on that :s

Related

ESlint problem with Cypress while using Vite

I wanted to try automated testing with Vue3 for my next project.
When I created my app using Vite and selected that I would like to test with Cypress everything seems to work fine but...
Although project starts like it suppose to when i type in console npm run lint I receive an error message saying:
C:\Users\myname\Desktop\vue-project\cypress\support\component.js
27:1 error 'Cypress' is not defined no-undef
and this is the line in which error occurs:
Cypress.Commands.add("mount", mount);
Any help from you guys would be appreciated
Ok so maybe someone will find it helpful.
It appears that problem with this one considers mainly ESlint.
If you can not run Cypress with command npm run test:unit:
make sure Cypress is also installed globally.
Then simply ignore ESlint errors considering cypress and don't change this line - const { defineConfig } = require("cypress"); even if lint suggest
doing it.
Congrats, you now should be able to run tests with Cypress :)
Bonus: if you do mind errors in your console and wanna keep it clean you search for some lint setup considering Cypress, to find a good setup for your lint if you do mind errors in your console.'eslint-plugin-cypress' didn't do the trick for me.

Vue Material postinstall failed

So I've been working on a Vue.js project for couple times now, and I am facing a problem I've never seen before.
Trying to git pull the project on another computer, or even downloading the project as a zip file, when it's time to npm install, vue-material module fails and the whole thing cannot be run.
It goes this way, with vie-material :
vue-material#1.0.0 postinstall C:\<my_things>\node_modules\vue-material
sh build/git-hooks/install.sh
Then I see this :
/usr/bin/bash: build/git-hooks/install.sh: No such file or directory
Then the modules' tree shows in the terminal, and at the end, I can see all the errors related to vue-material, with this statement :
Tell the author that this fails on your system:
sh build/git-hooks/install.sh
By the way, I tried to crate a brand new Vue project, and tried to add vue-material inside, no problem, so it has to do with my project.
Obviously though, /usr/bin/bash does not exist, since I'm running Windows 10.
Any knowledge on npm's installing routine ? I'm out of solution to try...
Can you share your package.json file?
I had this same problem just now and found that NPM could possibly be installing the incorrect version. Where I had "^vue-material": "1.0.0-beta-7" NPM was installing version 1.0.0 instead of 1.0.0-beta-7. If you remove the ^ then it may work for you. This is where I found the answer that helped me.
https://github.com/vuematerial/vue-material/issues/1155
Well, after couple times figuring out what was wrong, I got this :
I tried to use yarn and it told me that my node version was too old (vue-material needed 7.0+ and my node was 6.9, or at least that is what yarn told me), so I got myself the 8.9.3 node.
After this I tried to use yarn again, and the error with that bash script showed again.... then I just tried to use npm install again, and it worked just fine...
I don't know about the bash script thing, but one thing to remember is to always check for node and npm's version when errors happend.... (and yarn looks very cool and simple imo ^^).
You kinda made me think about a version problem though, I got you that ! :D
Problem solved....

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!

react-native init hangs/stalls with no error

New to react, working through a udemy tutorial on a Mac. Installed node ok but when I go to start a project
react-native init projectname
terminal output:
This will walk you through creating a new React Native project in /Users/myuserid/projects/projectname
Installing react-native package from npm...
and it just "hangs" there... seemingly frozen or chugging along. When I check Monitor it looks like Terminal is using 0% CPU. There is no indication (backslash flipping or otherwise) that it is processing.
Inside the projectname directory is a "package.json" file and a "node_modules" file with a bunch of subfiles.
I saw this post with a similar problem (https://github.com/facebook/react-native/issues/2806), but doesn't look like there is a remedy. Is there any way to speed this up? How can I tell if it has stalled forever? Will this happen during every project init I do?
I'm not in China... I have fast internet... and I'm using NPM 3.3.12
Thank you!
I got the same issue , and i found the 1st comment on the question is useful .
Indeed , If no error, it means that it takes time to download dependencies.
You can track downloading by adding --verbose :
react-native init projectname --verbose
You will spend a long period to reach 50% of downloading.
Nevertheless, you might face the following error :
npm WARN react-native#0.34.0 requires a peer of react#~15.3.1 but none
was installed. npm verb exit [ 0, true ]
If so , check this thread .
I had the same problem while using an existing (empty) directory as App name
It worked as soon as I changed the App name to something new

Travis-CI not being able to load tv4

My project was passing on Travis till my last commit. After this commit, Travis says:
Error: Cannot find module 'tv4' (at https://travis-ci.org/a85/Newman/builds/37216427#L141)
It has installed tv4#1.1.3 as part of the build (as seen at https://travis-ci.org/a85/Newman/builds/37216427#L40)
In version 1.1.3 of tv4, the name field in package.json is "tv4" (https://github.com/geraintluff/tv4/commit/4887d0f073951db681d23b9fde69ed7a9092fdea), so I guess it's not a case issue.
I've tried rebuilding a number of times, but it hasn't helped. Running grunt test locally works perfectly.
Any ideas?
I have the same issue, but i managed to fix this when i changed package.json to the following:
{"main": "tv4.js"}
Instead of
{"main": "tv4.min.js"}
If you take a look at:
https://github.com/geraintluff/tv4/issues/157