React/Node Uncaught SyntaxError: Unexpected token <

This error almost always means that some code is trying to JSON.parse something that is an HTML document.

It is very difficult to know what is happening based on the information you have provided.

I'd suggest to look at the chrome devtools Network tab, and see what call to the server is generating the error. Look at the response, it is probably HTML when js is expected.

In my case method with base href in index.html doesn't help. My project has separate repositories for web and server.

Problem was in wrong paths in express config, I have made those changes and app start works:

app.use(express.static(path.join(__dirname, '../../../../web/build'))); // the same directory as below

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../../../web/build/index.html'));
});

I've recently dealt with this issue and found multiple potential causes, but here’s what worked for me. (I'm using: Node, Express.js, Create React App, and Cloud Run)

The problem was that the browser cached the index.html file. When you generate a new React build (Create React App), the main JS file gets a new name. Since the users' browser had cached the old index.html, it was attempting to load a JS file that no longer existed.

If you then have a route ('/*') which sends unhandled requests to index.html, this returns a HTML file instead of a 404 error - leading to the confusing error

Unexpected token '<'

and a blank white screen.

When attempting to stop caching on the index.html file I discovered that when at the home screen 'example.com/' it was the static route serving the index.html file - which can lead to the error persisting on the home screen even though caching has been disabled.

Here’s how I fixed it:

// Put all other routes above here

// Serve static files from the React app build directory
app.use(
    express.static(path.join(__dirname, 'src/build'), {
        index: false, // Prevent serving index.html
    })
)

// Serve index.html for client-side routes, with no caching
app.get('/*', function (req, res, next) {
    // Allow static files to 404
    if (!req.path.includes('.')) {
        res.sendFile(path.join(__dirname, 'src/build', 'index.html'), {
            etag: false, // Disable ETag header
            lastModified: false, // Disable Last-Modified header
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate', // Prevent caching
                Pragma: 'no-cache',
                Expires: '0',
            },
        })
    } else {
        next()
    }
})

// Handle 404 errors for missing static assets
app.use(function (req, res, next) {
    res.status(404).send('Not found')
})

There are two things I see that might be the problem. One, I see from your comment that the code to handle the response is res.sendFile(${__dirname}/${buildPath}/index.html I think what you want is actually

res.sendFile(`${__dirname}/${buildPath}/index.html` // Note the backticks

If that's not it, I would think that you are serving that same HTML file to requests for your .js, .css, etc files. Are you using some type of static file middleware? If you use that, it will serve an actual file if it exists on the server, and serve your index.html file for everything else.

To check, you can open your chrome developer tools and look at the request for your javascript file (main.js or whatever you have it named). Is it the correct javascript, or is it the HTML from index.html? If it is the HTML, you need to look at this, assuming you are using express server: https://expressjs.com/en/starter/static-files.html