Next.js: Uncaught SyntaxError: Unexpected token <

[ruscandino]

Bug report

Describe the bug

Getting this error in the web console:

dll_11fbb1faa946535a5071.js?ts=1559223758567:1 Uncaught SyntaxError: Unexpected token <
index.js?ts=1559223758567:1 Uncaught SyntaxError: Unexpected token <
_app.js?ts=1559223758567:1 Uncaught SyntaxError: Unexpected token <
webpack.js?ts=1559223758567:1 Uncaught SyntaxError: Unexpected token <
main.js?ts=1559223758567:1 Uncaught SyntaxError: Unexpected token <

Here is my system, following directly nextjs-news.

// pages/index.js
import React from 'react'

export default class extends React.Component {
  static async getInitialProps({ query, res }) {
    const { color } = query;
    return { color };
  }

  render() {
    const { color, url } = this.props;
    return (
      <div>
        Hello
      </div>
    );
  }
}

// next.config.js
module.exports = {
  target: 'serverless'
}

// now.json
{
  "version": 2,
  "public": false,
  "builds": [
    { "src": "package.json", "use": "@now/next" },
    { "src": "/static/*", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/static/(.*)", "dest": "/static/$1" },
    { "src": "/(.*)", "dest": "/?color=$1" }
  ]
}

// package.json
{
  "name": "next-news",
  "license": "MIT",
  "dependencies": {
    "isomorphic-fetch": "^2.2.1",
    "ms": "^2.1.1",
    "next": "^8.0.0",
    "nprogress": "^0.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "url-parse": "^1.4.4"
  },
  "scripts": {
    "dev": "now dev",
    "build": "next build",
    "start": "next start",
    "now-build": "next build"
  }
}

Expected behavior

It should load the JS but it's loading HTML instead.

[timneutkens]

I think you have a .babelrc file somewhere up in the directory tree.

[ruscandino]

@timneutkens no .babelrc in the directory tree :/

[timneutkens]

Oh you're missing a route (_next):

    { "src": "/_next/(.*)", "dest": "/_next/$1" },
    { "src": "/static/(.*)", "dest": "/static/$1" },
    { "src": "/(.*)", "dest": "/?color=$1" }

[ruscandino]

That was it, thanks!

[JamieWilliamsHackIT]

@timneutkens is there more info on this in the docs somewhere? Can't seem to find anything about the _next route.

[BrunoQuaresma]

I'm having the same issue :/

[MicahRamirez]

@brunocascio the _next route worked for me. Initially it didn't. Remember routes cascade, so make sure you attempt the order specified above. Sorry if that doesn't work!

[BrunoQuaresma]

It was a dummy error, I was setting my assets to load a bad URL. Sorry for the noise.

[pjaws]

I'm having this issue, and it has nothing to do with routes. I don't have a now.json file, because I'm not using Now.

[HuJean]

Oh you're missing a route (_next):

    { "src": "/_next/(.*)", "dest": "/_next/$1" },
    { "src": "/static/(.*)", "dest": "/static/$1" },
    { "src": "/(.*)", "dest": "/?color=$1" }

where to config route(_next)?

[timneutkens]

Update: you no longer need a now.json for Next.js for both hybrid or next export.

[hdra]

@timneutkens may I know what was the issue with this? I'm guessing it has something to do with dynamic routes? I'm running into this only when running the next export build with nginx

[anteeek]

@hdra Having the exact same issue here, also using next export and nginx. Any idea how to fix that?

[mknoedel]

Same, this should be reopened.

[anteeek]

Where my problem originated was I used dynamic route in root of pages, as like:

pages/[slug].ts

When changed it to

pages/m/[slug].ts

It was again working (I have no idea why, though)

[javascriptjames]

Why is this closed? There isn't any real solution for most people having this issue.

@timneutkens I don't have a .babelrc file and none of these comments pertain to my issue.

Can this be re-opened and looked into further?

Or at least re-opened so others can post their exact issue. I'm not finding any solution in this thread.

Thanks

[ielmar]

I solved this problem by adding "href" and "as" attributes to Link as in <Link href="/[lang]" as="/az">

[AntonioRedondo]

This bug happens to us at random when hovering over some Next.js Links and prefetching fails throwing this SyntaxError. However the URL is totally fine and if copied and pasted in a new tab it will work perfectly.

I've been unable to find any pattern why it fails in a minority of links sometimes, some other times the same link works fine.

Issue happening on Next.js 9.4.

Update: after disabling prefetching on links the issue still occurs, but now on link click rather than on link hovering. ☹

[AntonioRedondo]

@ielmar could you further explain your solution please? You mean that rather than the usual <Link href="/az"> you had to use instead <Link href="/[lang]" as="/az"> even when you didn't need slugs?

[ielmar]

@AntonioRedondo, as far as I remember from what I found out is that Dynamic routing requires both "href" and "as" props. Href shows the folder structure under pages folder while as prop shows how it will look on the browser.

To my understanding, if you have a structure like "pages/issues/[id].js" as on github link, you must use <Link href="/issues/[id]" as="/issues/7469">

[AntonioRedondo]

In the end what @ielmar suggested was the solution for us.

The issue was that a dynamic route was used but the as prop wasn’t present on the Link component. At the same time we couldn't know beforehand that the link we were passing to the href prop was dynamic or not because it was coming from a CMS where both dynamic and static URLs had to be accepted.

The _solution_ (patch) we implemented was to assume all relative URLs were dynamic queries with one trailing slug, and all absolute URLs were static queries. We could have implemented some extra logic to compare the URL passed with a list of dynamic routes. But the list would be very long and it would overcomplicate things that, in the first place, should have been handled by the Next.js router.

I think this behaviour should have been handled better: the documentation could clarify that the Link didn’t detect automatically whether the path passed was dynamic or not. And in case a dynamic route without the as prop was used, the Next.js router would fail because it would search for a non existing JS chunk, and a 404 error HTML page would be returned instead. Hence that Uncaught SyntaxError: Unexpected token < error thrown because of the HTML received.

Thankfully this behaviour has changed on v9.5.3 and now the Link component will take care of detecting whether the URL is dynamic or not without any additional prop. We haven’t had the chance to upgrade to this version yet.