Vue 3 browser caching doesnt pick latest files - vue.js

We have a build.js code in our project which makes a duplicate of our client directory and adds a folder inside src.
example -
client/src/components will become dist/src/abcxy/components
abcxy will change every time we create a new build.
Now the problem is that the browser tries to find the old dist files from the cache and is unable to find them, instead of finding new files it gives an error in the console.
The error changes depending on the browser I am using
EXAMPLE ERROR - Failed to load ‘http://localhost/src/pbtsg/components/report/reports.js’. A ServiceWorker intercepted the request and encountered an unexpected error.

Related

how to solve module build failed after changing file extension ( *.ts => *.tsx )?

after changing a specific file's extension from .ts to .tsx I get:
Compiled with problems:X
ERROR in ./src/components/SomeComp/someFile.ts
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '.../someFile.ts'
ERROR
No files matching 'C:\Users...\src\components\SomeComp\someFile.ts' were found.
it has happened recently and somehow figured out on its own,
then i switched branches and when returned it happened again
I tried what was suggested here, clearing the browser cache How to get Chrome to reload source maps?
also restarted the react dev server couple of times
but still it tries to find the file with the old .ts extension...
searched as much as I could but didn't find a solve...
edit:
after changing the extension back and forth and restarting the dev server it has figured out, but I would still love to know what was happening and what perhaps what should be done to handle this situation correctly in the future

Direct nested URL fails with error "Uncaught SyntaxError: Unexpected token '<'" - Create React App/React-router-dom/Netlify

I've got an app created with create-react-app (with react-router-dom) and deployed with Netlify. Whenever I try and route to a page through a direct (nested) URL, such as 'https://jvcparry.com/products/indie', it fails to load a page and gives the errors
Uncaught SyntaxError: Unexpected token '<' main.e3eaf229.chunk.js:1
However when I navigate the deployed version through links, everything loads fine. I also don't get this error when I'm running the app locally, which I guess means it must be something to do with deployment?
I've trawled through all the other posts I can find with this error, and also things to do with Netlify/CRA deployments. I've got a _redirects file with '/* /index.html 200' in it in my /public folder, and I've tried refactoring my routes to use code-splitting but that's made no difference.
My code is on github here: https://github.com/NatClamp/jvcparry
Deployed version is here: https://jvcparry.com/
and if you go to https://jvcparry.com/products/indie you'll see the error I'm getting.
Can anyone shed any light on this? Thanks in advance
A rigid but working solution is to update _redirects file this way:
/*/main.e3eaf229.chunk.js /main.e3eaf229.chunk.js 200
/* /index.html 200
You can also be updating this file every time you build new js bundle during your CICD run

sails.js stopped to work after cloning from repository

After adding to git and cloning sails.js application back to another desktop my application stopped to work correctly. e.g. I am able to successfully run sails lift command, however when trying to load login page I see that the page is not loaded properly:
and I receive multiple errors in browser console (back end console is ok and does not drop any errors):
cloud.setup.js:13 Uncaught ReferenceError: Cloud is not defined
at cloud.setup.js:13
Uncaught ReferenceError: parasails is not defined
at ajax-button.component.js:12
ajax-form.component.js:20 Uncaught ReferenceError: parasails is not defined
at ajax-form.component.js:20
Uncaught ReferenceError: parasails is not defined
at js-timestamp.component.js:15
...
I checked node_modules folder and parasails is included there.
I didn't include node_module to my repo as I can always run npm install after cloning.
I managed to create and successfully run a new sails.js application on my desktop without any issues.
So, there must be an error with the files I pushed or didn't pushed to git.
In .gitignore file I had dependencies/ folder excluded.
That rule was excluding any file in assets/dependencies subfolder, where a number of sails.js files are located, e.g. parasails.js, etc.

“Page Not Found” when navigating to site created with Gridsome & deployed on Netlify

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.

Uncaught syntax error: unexpected token < error

I'm using service worker and caching with workbox using webpack for a vuejs app. While it worked fine until now, when I pushed new changes to our app, the app breaks after reloading the page and gives this error. Also, in the network tab, I see that it is requesting a non-existing app.js build file which was a previous deploy file. How do I solve this?
If you observe the image, you can see that the request is going to older app.js file while in the dist folder to the left, the hash of app.js bundled is different.
error image