I created a small project using scrimba.com. It works fine on scrimba's browser, but when I downloaded it and tried to open it on Chrome it doesn't work (or Firefox or GitHub Pages).
The error goes as follows: .../script.pack.js net::ERR_FILE_NOT_FOUND, so I figured it has to do with my script src="script.pack.js", but can't make it work nor did I found a solution. I am new to coding and would appreciate a hand. Below are screenshots of the following files:
index.html
package.json
webpack.conf.js
Related
I am trying to use scroll magic in my project on glitch server hosting. My project is setup with express.js and I have to import all packages through a package.json file and I am writing the scroll magic code in the HBS file.
and here is my HBS file at the bottom the console.log test works just fine
I have tried so many things and I cant get it to work I have tried downgrading, debugging, and linking all sorts of different packages, I have tried ChatGBT and googling I really have tried for hours. any help would be great thank you
I recently completed my first project that integrates html, css, and javascript. When I deployed the website to github pages, the site generated looks like the html file is not communicating with the css and js files.
When I run the index.html file on my local machine, it works just fine on the mozilla and safari browsers. Can anyone help me understand why this is happening?
Here is a link to the github repository My Github Repository
Here is what the site is supposed to look like
Thank you
Looking at your repository the files are in the same directory as the index.html, so:
instead of <script src="./javaScript/script.js"></script>
import like this:<script src="/script.js"></script>
Doing /script.js is the same as
https://xavier-julian-rodriguez.github.io/OrlandoDateGenerator/script.js
To check if you are importing correctly try to access the file from the url: https://xavier-julian-rodriguez.github.io/OrlandoDateGenerator/script.js
I'm maintaining a Vue2 project in which I've recently upgraded #vue/cli-service to version 5.0.4 (from 4.5.0).
Now I've noticed that I can't use my browser devtools to debug the app anymore. Specifically, when I open the devtools and press CTRL+P and type App.vue, the browser opens a compiled version of that file. Previously, it would open the original source file and allow me to place working breakpoints in that file.
This problem occurs in Chrome, Edge, and Firefox.
This problem even happens to the default project scaffold generated by the latest #vue/cli (version 5.0.4 also), with typescript and babel disabled (eg the project generated using vue create testProject).
As a matter of fact, this problem even happens to the default Vue3/Vite project scaffold generated by npm init vue#latest. With or without typescript. I have no idea how anyone in the Vue ecosystem are debugging their projects anymore.
I've already tried setting configureWebpack.devtool = 'source-map' - that hasn't had any effect.
Am I doing something wrong?
This is working for me. I tried to reproduce (npm init vue#latest). When I hit ctrl-p, the first App.vue that's suggested is, as you say, a compiled version. But if you keep hunting down the list, look for the App.vue that has a directory path after it, and you should see your source and be able to put breakpoints. I also like to open my source directory in the filesystem sub-tab of the sources tab in devtools, and this works fine as well, breakpoints included.
EDIT: Source Map works in Firefox, but not in Chrome or Edge.
When I'm debugging warnings/errors, I click on the TSX file and it pulls up an obfuscated version of the .ts/tsx file. The following screenshots will help clarify my issue...
When I get a React error like this
I click on the /components/AddObject/index.tsx link and it opens the file in the console, but it looks like this
Here's what my webpack config looks like (using devTool: 'eval-source-map')
Any thoughts as to why my source-map file is behaving this way?
I've been trying everything for the past two days to solve this issue. I'm well and truly stumped. Perhaps someone with greater knowledge than I can shed some light on the issue:
Basically, I'm building an app in AngularJS with the purpose of building Android and iOS apps from it using Cordova. I should specify that I am using cordova-cli on Linux and ngCordova (wrapper around plugins). I am NOT using Ionic Framework.
My app works fine in Chrome. I followed the ngCordova installation guide perfectly: http://ngcordova.com/docs/install/
I used bower to install. Then included the following in the index.html of my Web App project (not the Cordova project):
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
It didn't work. I thought maybe it's because the ng-cordova.js went into my bower components directory. So I changed that script tag to:
bower_components/ngCordova/dist/ng-cordova.js
When I go to my cordova project directory and set up the platforms, plugins etc... and run:
cordova build android
followed by
cordova run android
The app runs on my device (Nexus 5). I use chrome://inspect to see what happens when I click the button which should be using the email composer plugin: I get a cordova not defined error.
I went into the controller and put this in
console.log($cordovaEmailComposer);
I can examine this in chrome://insepct and it has all the correct functions etc.. so ng-cordova.js is running fine (thats where the factory for the plugin is).
I'm 99% sure the issue is that somewhere along the line cordova.js is being lost. When I go into the cordova project in the ProjectName/www/index.html the tag for cordova.js is commented out.
Same in the platforms/android/assets/www/index.html file.
I traced it back and the same is true in WebAppProject/dist/index.html file. It's commented out. So it seems that when I run grunt build cordova.js is being removed. I thought maybe it's because cordova.js wasn't in the WebAppProject so I brought it into the root directory (same locations as index.html) and it still happened.
Can anyone explain how to properly get this working? I'm totally at a loss. I've tried a million different ways of including cordova.js. I even manually uncommented it out in the cordovaproject/www/index.html. The app builds but crashs upon opening (white screen then dies) suggesting a missing script (despite cordova.js being n that directory too...).
Is this the grunt build process? Or am I totally setting up an ngCordova project incorrectly without realising... I would post some code but I'm 99% sure the issue is with cordova.js or the way the project is building upon either grunt build or cordova build.
Any help would be much appreciated. :)
Cheers,
D
Make sure to include ngCordova before cordova.js and after angular.js.
<script src="/path/to/angular.js"></script>
<script src="/path/to/ng-cordova.js"></script>
<script src="/path/to/cordova.js"></script>