Next.js: _next-prefetcher.js: The script has an unsupported MIME type ('text/html').

[sarukuku]

I'm having problems with the build configuration (that's just my guess as I have no idea). I've followed the custom-server-express example in next.js repo and I'm getting errors in the browsers console that look like this:

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
_next-prefetcher.js:1 The script has an unsupported MIME type ('text/html').
http://localhost:3000/_next-prefetcher.js Failed to load resource: net::ERR_INSECURE_RESPONSE

I've cloned the examples/custom-server-express and modified it to provide a minimal case that still has this issue. You can find the clone here: https://github.com/sarukuku/next-custom-server-express

[arunoda]

@sarukuku thanks for the repo. I'll have a look at this.

[arunoda]

Yep. I can see that.
Let's see what's going on here.

[sarukuku]

Thanks @arunoda! All I know is that in the server.js requests that trigger return handle(req, res) work correctly but the requests that trigger return app.render(req, res, '/', req.params) don't.

So handle() must be doing something different than app.render().

[arunoda]

Actually, this is not a bug but how Next.js works.

We need to serve few pages from the root. Those includes:

• /__webpack_hmr (only on dev)
• /next-prefetcher.js

In your route mappings, Next.js can't access those files.
Here's how to fix this:

app.prepare().then(() => {
  const server = express()
  const supportedLanguages = { 'fi': true }

  // Register the lang root route.
  server.get('/:lang', (req, res) => {
    console.log('Serving: ', req.url)

    if (supportedLanguages[req.params.lang]) {
      return app.render(req, res, '/', req.params)
    } else {
      return handle(req, res)
    }
  })

  // // Redirect root to default language if not passed.
  server.get('/', (req, res) => {
    res.redirect('/fi/')
  })

  // Handle other requests.
  server.get('*', (req, res) => {
    return handle(req, res)
  })

  // Start server.
  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

[sarukuku]

Great! I'll test this in my real life application and report back.

[sarukuku]

Works. Thanks for clearing this up!

[DarrylD]

This solution is definitely doc worthy.

[kristojorg]

I used next for a while with a project, but then am now trying to go back to create-react-app since server rendering is not super important to me at this time.

I deleted all my files except .git in my root folder, and then started new with CRA. I'm still seeing this error however... have any idea why? Does it have to do with my browser caching code or something?

[kristojorg]

For the record, it had to do with the serviceworker not being unregistered... I went to this url: chrome://serviceworker-internals/ in Chrome and manually unregistered for my localhost.

[alexedev]

@kristojorg I had the same problem. Thank you for sharing your solution!

[cbroberg]

This is also a good reason: See