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.

1 Like
#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.

#6

Unfortunately, couldn’t figure out a way and had to host them in a single server.

#7

You need to set the root url key and the admin.url key and they should be absolute even if you aren’t using the strapi backend to serve the admin panel panel

#8 

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'https://api.example.com',
  app: {
    keys: env.array('APP_KEYS'),
  },
});

Update your ./config/server.js with the appropriate url aka https if you have ssl cert setup; if not, then use http.

Also, triple check on cache problems with jwt tokens. Clean data for browsers.