Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hot reload doesn't work, keep getting an error related to EventSource

See original GitHub issue

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

Screen Shot 2019-12-09 at 12 07 29 PM

System information

OS: macOS 10.14.5
Browser: Chrome
Version of Next.js: 9.1.4 [latest]

Issue Analytics

State:
Created 4 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

8reactions

nicky2473commented, May 19, 2020

I faced the same issue. If you run extension tools that remove cors issue like ‘Moesif CORS’, You will face this issue.

2reactions

sacmiicommented, May 7, 2020

Facing the same issue. Setup: Basic project with `yarn create next-app``

Top Results From Across the Web

Hot Reload is not working in my React App - Stack Overflow

1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import....

Troubleshooting XAML Hot Reload - Visual Studio (Windows)

Error indicates you're attempting to wire an event to one of your controls, which isn't supported while your application is running. This change ......

Developing Real-Time Web Applications with Server-Sent ...

Learn how to create real-time web applications by using the Server-Sent Events specification.

Netlify dev --live is not hot reloading when I change code

I'm not seeing those errors with Gatsby. I get two warnings (for mitt.es.js.map and netlify-identity.js.map) but I don't think they're related to this...

ESP32 Web Server using Server-Sent Events (SSE)

The SSE server implementation is simpler– it's similar to a normal HTTP reply except you don't give a length, then just keep the...