I have a brand new create-react-app test-app and when I tried to debug it using chrome devtools, I found a few files were missing, i.e. favicon.ico, logo192.png and logo512.png, as shown in the picture below:
But when I run yarn build, I can clearly see all files are generated under build. So I am confused why this happens.
Thanks
Related
I've got installed Cypress on my Vue project and created just a few simple tests that perform great when I run Cypress with this command npx cypress open.
I am trying to implement automatisation with the help of Lambdatest but when I run command lambdatest-cypress run I receive this message in return:
Checking Lambda Config in current directory
Validating CLI
validating config
Error!! Cypress Config File does not exist
I have installed Lambdatest cli globally, added lambdatest-config.json in the root of my project, and updated "lambdatest_auth" data in this file. Also I've got cypress.config.js on the same root level in project's directory. Cypress's config file does not show any errors excluding eslint saying that
on this part
setupNodeEvents(on, config) {
// implement node event listeners here
},
on and config are declared but never used.
Do you have any ideas why I can not run this one using Lambdatest?
As always maybe someone will find it useful.
So... it would seem that in some cases lambdatest get's a little bit lost and it's config is not filled with the things it should be :)
The solution was to remove this line of code in lambdatest-config.json file which is located in the project root directory.
"cypress_config_file": "cypress.config.js", <-- remove this line
I have a Vue-cli project with Vuetify. After "npm run build" command files in Dist folders looks like minified files. But after publishing I can see non-minified code in Chrome devtools. What is missed?
On your dist folder the files are combined minifided to make delivering them from the server more efficient.
Next to this files you will see a *.map file. This is the source map. This is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger (in your example Chrome Dev Tools).
You can turn off this option as explained in the vue-cli docs default is set to true
Using a source map
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.