Uncaught SyntaxError: Unexpected token '<'

[Ghaleb-alnakhlani]

Hi,

I have a problem when i deploy the React app or Razzle with lib folder. I place the lib in the public folder, included the script in the html pages. It is working fine when i run the app locally but after deploying the app to Vercel, i get the error above. even thought the file cookieconsent and polyfills are javascript. I still don`t know why it doesnt work.

[robindanzinger]

Hello @Ghaleb-alnakhlani , first thank you for publishing the issue. And second: sorry for the late reply.

Unfortunately we don't use React and Vercel, so it's difficult to say, what went wrong. Our lib is a simple javascript file (we use some polyfills because of IE11-support), and it should work out of the box. As you said, it works fine, when you run the app locally. So there might be a problem, when you package the app and deploy it.

Can you share more details about the problem? Which Browser (+ version) did you use? Do you have the problem in any browser? The stacktrace and exact position of the error. And the used (packaged) file (or part of the file), where the error occured. Maybe you can provide a small setup (a small git-project), where we can reproduce the error? Thank you in advance

[Ghaleb-alnakhlani]

Hi @robindanzinger glad to get hear back from u. I am still not sure if it is problem with your script. it seems the problem with vercel i guess or similar setup structure server like vercel. The problem occurs on both browsers Chrome (latest) Mozila (latest).

here is the error

But as i said earlier it seems not a problem with you script which is working fine on localhost

I have a question out of this scrope? how to hide cookie setting button from the page ?

Thank you for this library after searching alot i found yours the best.

[robindanzinger]

Hello @Ghaleb-alnakhlani , thank you for sharing the screenshot. What I do not understand: the file shown is the home.html. But selected is the polyfills.js. Maybe the polyfill.js was overwritten and contains now html-code (instead of javascript). Maybe it's only the wrong screenshot.

Here the screenshot with some markers, what I find confusing:

[robindanzinger]

Polyfills.js should look like this:

[onza]

Hello @ Ghaleb-alnakhlani, Thanks a lot! Nice to hear that:) You can throw out the settings button by deactivating the entire button with the class "cookieconsent-banner__button - settings" in CookieConsent.js. In addition, this will probably make the "showCookieConsentSettings" function superfluous. But you would have to test that.

[Ghaleb-alnakhlani]

Hello @Ghaleb-alnakhlani , thank you for sharing the screenshot. What I do not understand: the file shown is the home.html. But selected is the polyfills.js. Maybe the polyfill.js was overwritten and contains now html-code (instead of javascript). Maybe it's only the wrong screenshot.

Here the screenshot with some markers, what I find confusing:

@robindanzinger that is the problem and don`t worry i just confirmed it is something with server some of files they are changed , js file to html which is weird behavior, but if you know a solution to this problem you can suggest how to solve it.

[Ghaleb-alnakhlani]

Hello @ Ghaleb-alnakhlani, Thanks a lot! Nice to hear that:) You can throw out the settings button by deactivating the entire button with the class "cookieconsent-banner__button - settings" in CookieConsent.js. In addition, this will probably make the "showCookieConsentSettings" function superfluous. But you would have to test that.

thank you I will test that, I also got another idea to hide the button using CSS I will find which one works best.

[robindanzinger]

Maybe it's a problem with source-naming: If you are sure, that the server contains the correct libs, but it serves other files, it looks like the naming of the source is wrong (and the default behavior is to serve the home.html). Maybe a relative path don't work here. Then change the src attribute for all 3 files (cookieconsent.js, polyfill.js, cookieconsent.css) in your home.html (or where you include the files):

src="lib/..." -> src="https://lbs-rouge.vercel.app/lib/..."

How do you load other resources (js, css) from the server?

[Ghaleb-alnakhlani]

Maybe it's a problem with source-naming: If you are sure, that the server contains the correct libs, but it serves other files, it looks like the naming of the source is wrong (and the default behavior is to serve the home.html). Maybe a relative path don't work here. Then change the src attribute for all 3 files (cookieconsent.js, polyfill.js, cookieconsent.css) in your home.html (or where you include the files):

src="lib/..." -> src="https://lbs-rouge.vercel.app/lib/..."

How do you load other resources (js, css) from the server?

Good idea I will try to do that, although it should pick automatically the url, but i need to try this if it works. Other resources loads correctly and noticed other warning from other files as well. Seems the server having hard time with some of the files to load correctly.

[robindanzinger]

No, as I see it, the files are not uploaded to the server (or they are at a different location). Also the other css files can't be loaded:

    <link href="/css/fontawesome.css" rel="stylesheet">
    <link href="/css/brands.css" rel="stylesheet">
    <link href="/css/solid.css" rel="stylesheet">

And when I directly type in the address, I get an empty page: https://lbs-rouge.vercel.app/lib/polyfills.js

Are you sure, you have uploaded the files to the correct location?

[robindanzinger]

There is a static folder. Maybe you have to upload the files to static/js or static/css. Or there is a misconfiguration when packaging the app with vercel (so the css and js files are not included).

[Ghaleb-alnakhlani]

There is a static folder. Maybe you have to upload the files to static/js or static/css. Or there is a misconfiguration when packaging the app with vercel (so the css and js files are not included).

In that case i guess I need to create static folder and place all the files there because i was using public folder

[Ghaleb-alnakhlani]

I think because i added these to public folder. It seems doesnt work with Razzle

[robindanzinger]

Hello @Ghaleb-alnakhlani ,

I hope you find a solution for your problem. It seems to be a problem with the deployment via Razzle?. Unfortunately I can't help you with Razzle. So if you have problems with accessing static files after deployment, you might better ask the people at Razzle. I will close this issue. If you still have any questions you are welcome to ask or if there are any other problems with our script files you are welcome to open new issues.

Best regards