“Uncaught SyntaxError: Unexpected token <” on deploy using Netlify

Support
, ,
1

Hello.

I am facing issues similar to the ones in this post:

[Common Issue] Why do I see “Uncaught SyntaxError: Unexpected token <” errors? How can I use chunking or versioning for my assets at Netlify?

Welp, I still cannot manage to find how to fix the issue.

I am developping a react application, using Netlify to build & deploy the app automatically on commit. Thing is, whenever a new build is deployed in production, the client faces a blank page with this error:

63477 - Copie
63477 - Copie1685×389 19.9 KB

This does not happen when the website is loaded for the first time by the navigator, and only happens after a new build. After a few reloads, the issue goes away and the website behaves correctly. Thus I assume this has to do with caching.

Also, I didn’t manage to reproduce the error locally. This only happens after a Netlify deployment.

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Sensuba</title>
</head>
<body>
    <noscript>
    You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    </body>
</html>

Manifest.json :

{
    "short_name": "Sensuba",
    "name": "Sensuba",
    "icons": [
    {
        "src": "favicon.ico",
        "sizes": "64x64 32x32 24x24 16x16",
        "type": "image/x-icon"
    }
    ],
    "start_url": "./index.html",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

index.js, in the /src folder :

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import './style/index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import registerServiceWorker from './utility/registerServiceWorker';
import Api from './services/Api'

const api = new Api({ url: 'https://bhtwey7kwc.execute-api.eu-west-3.amazonaws.com/alpha' });

const options = { api }
         
render(
    <App options={options} />,
    document.getElementById('root')
)
registerServiceWorker();

I know this is kind of a known issue, but I didn’t find how to solve this problem in the others threads.

Website : http://sensuba.netlify.app/
Github : GitHub - Sensuba/webapp

2

hi there, this isn’t a perfect answer, but i am wondering if whether some of the strange behaviour you are seeing is due to a service worker:

i am also seeing that the %PUBLIC_URL% is getting output in your html, which hints that something during your build step isn’t configured correctly:

is this helpful at all?