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.
Related
I'm trying to add End to End testing to my application through Cypress, however I've run into the issue that, after installing cypress through "npm install cypress" the command listed in their documentation "npx cypress open" will not work. It gives the following error.
`[35608:0112/105037.652:ERROR:resource_bundle.cc(991)] Failed to load C:\Users\User\AppData\Local\Cypress\Cache\12.3.0\Cypress\resources.pak
Some features may not be available.
Error: Cannot find module 'socket.io-client/dist/socket.io.js'
Require stack:
C:\Users\User\AppData\Local\Cypress\Cache\12.3.0\Cypress\resources\app\packages\socket\index.js`
What I've tried is a fresh reinstall of cypress, specifically adding socket.io and socket.io-client globally. I've also looked into the file path of resource.pak and have confirmed the folder is there.
Same issue here. Downgraded to 12.1.x to make it work again.
I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show before—Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked 🤜💥✨ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.
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
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!
Why the new VUE project just run on the error
They are not exactly errors but warnings. You can choose to ignore them or resolve them. Your console looks fine and is running properly.