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

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

Related

Blank page in page with CRA, NX.dev and vercel deployment

I am working on an application with React on monorepos, using nx.dev, service workers and configured with craco (came by default when using cra-to-nx). In addition, I'm deploying my application in vercel.
The problem comes in that when entering my application, always appears a blank screen, and by console appears the following error:
Error by console 404 static
If I enter in that file main.XXX.js, I see the following:
Error by console 2
I have tried several of the solutions I have found on the internet, but nothing has worked.
I have written
I have tried with homepage=".", homepage="/" and homepage="mydomain.com" in the package.json.
Thank you very much in advance

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

“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

Prestashop Productcomments Module Issue

I am experiencing a problem with the Productcomments module which I am using in a custom module and I cannot figure out how to fix it. The problem is with the star rating in the Productcomments form itself. This form works perfectly in a localhost environment - see images 1 and 2, but not on a live server - see images 3 and 4. On the live server it is showing no stars, just radio buttons, and no delete button for removing the stars.
Form as it looks on WAMP
Code from Chromes Inspect for WAMP
Form as it looks on Live Server
Code from Chromes Inspect for Live Server
Disabling the link to the following 2 js files recreates the problem on the local server which would suggest that the problem lies in the links to these two files on the live server, however I have checked all links to these files and they are correct, as are the permissions for these files.
jquery.rating.pack.js and productcomments.js
Occasionally when I clear cache under Advanced Parameters > Performance I get the following error message:
Fatal error: Uncaught --> Smarty: unable to write file /home/productm/public_html/cache/smarty/compile/10/e2/20/wrt5cbbb0747109d3_91450142
<-- thrown in /home/productm/public_html/tools/smarty/sysplugins/smarty_internal_write_file.php on line 46
This problem applies to all 1.6 versions of Prestashop tested.
Any suggestions on how to fix this problem would be appreciated.
Thanks
Kathleen
The error code you've got from clearing cache is linked to permission problems.
Here's probably a duplicate of your issue: How to fix erorr "Fatal error: Uncaught --> Smarty: unable to write file"?
Check that your prestashop files are set to 644 and folders 755 permission. (not just the js files you've mentioned).
Also if you manually moved the module to your live server(ftp), check the ownership of those files.
Edit:
I'll add this to the answer since the permissions didn't fix your problem.
looks like you have a prestashop bug going on with the JS (Synchronous loaded scripts)
here's a patch to fix that, maybe it fixes your original problem.
https://github.com/PrestaShop/PrestaShop/pull/6749/commits/73fd8dbed9f413a70f7d04fc4badd48f00ca501a