Cannot serve build directory: Uncaught SyntaxError: Unexpected token '<

Questions and Answers Frontend-React
#1
System Information
  • Strapi Version: 3.6.5
  • Operating System: Linux Mint 20
  • Database: MongoDB
  • Node Version: 14.17.1
  • NPM Version: 6.x
  • Yarn Version: 1.22.5

I’m trying to host the admin panel on Cloudflare pages separately from the API server.
The build succeeds but I keep getting this error in the browser console:

Uncaught SyntaxError: Unexpected token '<

I get the same error locally after building and hosting it through serve -s build.
The strapi dev command works however.

#2

Did you set the url key in the server.js?

(Not sure of the error)

#3

Hello. Sorry for the lack of details. It was a bit late last night.

I have two server.js files. One for production and one for development.

The file structure:

image

The production file:

module.exports = ({ env }) => ({
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  url: env("PROD_URL"),
  admin: {
    auth: {
      secret: env("ADMIN_JWT_SECRET", "some string"),
    },
    serveAdminPanel: false,
  },
});

The dev file:

module.exports = ({ env }) => ({
  host: "0.0.0.0",
  port: 1337,
  admin: {
    auth: {
      secret: env("ADMIN_JWT_SECRET", "some string"),
    },
    url: "/admin"
  },
});

I’m building the production build using NODE_ENV=production yarn build on Cloudflare Pages.

Here’s what happens if I test locally:

Build yarn start serve -s build
Production N/A (expected) :x:
Development :white_check_mark: :x:
#5

I am getting the same exact issue - loads fine on homepage, but I get the Unexpected token '< error on the admin page.

I’m running on Linode, Nginx.

I had to run the build locally, and ran the server in production mode locally which worked fine.

Were you able to find a solution to this?

Update: Works after I ran NODE_ENV=production npm run build on the server (had to temporarily increase server size) and restarted app.