Next.js: Hot reload doesn't work, keep getting an error related to EventSource
Bug report
Hot reload doesn't work, keep getting this error instead:
EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection.
Describe the bug
I just created a new next project using the npx create-next-app command and ran the local server through npm run dev. Since the start, it seemed like hot reloading didn't work as expected. When checking out the console I kept getting the same error.
Not sure if it has to do with Next.js or another of its dependencies.
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Create a new next project with
npx create-next-app [app-name] - Add support for styled components creating a new _document.js file
import Document, { Head, Main, NextScript } from "next/document";
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
// Step 1: Create an instance of ServerStyleSheet
const sheet = new ServerStyleSheet();
// Step 2: Retrieve styles from components in the page
const page = renderPage(App => props =>
sheet.collectStyles(<App {...props} />)
);
// Step 3: Extract the styles as <style> tags
const styleTags = sheet.getStyleElement();
// Step 4: Pass styleTags as a prop
return { ...page, styleTags };
}
render() {
return (
<html>
<Head>
{/* Step 5: Output the styles in the head */}
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
- Add support for the theme provider from styled components by overriding the _app.js file
import React from "react";
import App from "next/app";
import Head from "next/head";
// ---- Styled Components ---- //
import { ThemeProvider } from "styled-components";
import theme from "../utils/theme";
import GlobalStyles from "../utils/global";
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<>
<Head>
<title>[title]</title>
</Head>
<ThemeProvider theme={theme}>
<>
<Component {...pageProps} />
<GlobalStyles />
</>
</ThemeProvider>
</>
);
}
}
- Run a development server with
npm run dev
Expected behavior
The website automatically reloads when a change is made with the code.
Screenshots
System information
- OS: macOS 10.14.5
- Browser: Chrome
- Version of Next.js: 9.1.4 [latest]
sebastiancrossa
All 7 comments
Hi, I'm not able to reproduce this using the above steps. Can you provide additional details like are you adding a custom server, running the dev instance behind a proxy, or in a docker environment?
It looks like something is intercepting the internal Next.js request and not passing it through correctly
ijjk
on 9 Dec 2019
It seems weird, didn't really do anything else other than creating the server and install a couple of other dependencies.
I don't know if it helps, but I did some changes to the _app.js and _document.js to accommodate for styled-components. That's all I did.
sebastiancrossa
on 10 Dec 2019
Please provide a clear and concise reproduction as asked for in the issue template.
I don't know if it helps, but I did some changes to the _app.js and _document.js to accommodate for styled-components. That's all I did.
If you made changes to your app the reproduction instructions are incorrect right?
timneutkens
on 10 Dec 2019
You are totally correct. Just updated the report to accommodate all of the changes made on those 2 files! Thank you for pointing it out.
sebastiancrossa
on 10 Dec 2019
Update: I created a completely new next project, ran it and still got the same error getting called.
sebastiancrossa
on 10 Dec 2019
Facing the same issue.
Setup:
Basic project with
`yarn create next-app``
sacmii
on 7 May 2020
I faced the same issue. If you run extension tools that remove cors issue like 'Moesif CORS', You will face this issue.
Junho-Cho
on 19 May 2020
Related issues
timneutkens
路
3Comments
flybayer
路
3Comments
knipferrc
路
3Comments
olifante
路
3Comments
havefive
路
3Comments
Most helpful comment
I faced the same issue. If you run extension tools that remove cors issue like 'Moesif CORS', You will face this issue.