Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HMR with TypeScript causes infinite reloading loops #4285

Closed
1 task done
orta opened this issue May 6, 2018 · 13 comments · Fixed by #4639
Closed
1 task done

HMR with TypeScript causes infinite reloading loops #4285

orta opened this issue May 6, 2018 · 13 comments · Fixed by #4639

Comments

@orta
Copy link
Contributor

orta commented May 6, 2018 •
edited
Loading

  • I have searched the issues of this repository and believe that this is not a duplicate.

👋 Hey everyone, I've been using next with TypeScript (was 6.0 canary, now with 6.0.1 canary) and HMR has been causing quite a lot of issues. I created an example repo to showcase it: nextjs-typescript-hrm-bug-example

Basically the default setup for HRM in nextjs means that making a change in a *.tsx file would cause an infinite loop with these errors

screen shot 2018-05-06 at 4 08 44 pm

Which you need to kill the server to stop.

In making the example repo, I came up with the solution in my next.config.js:

    if (dev && !isServer) {
      const HMR = config.module.rules.find(r => r.loader === "hot-self-accept-loader")
      if (HMR) {
        HMR.test = /\.(ts|tsx|js|jsx)$/
        HMR.options.extensions = /\.(ts|tsx|js|jsx)$/
      }
    }

Which modifies the HMR to support TS.

Expected Behavior

This should probably be documented somewhere 👍 (which in part this issue is meant to do for others with the same problem)

Perhaps the with-typescript example could be updated to babel's TypeScript instead, and this can be added to the config file?

Steps to Reproduce (for bugs)

git clone https://github.com/orta/nextjs-typescript-hrm-bug-example
cd nextjs-typescript-hrm-bug-example
yarn
yarn dev

Then change index.tsx

Context

n/a
@jstcki
Copy link
Contributor

jstcki commented May 7, 2018

I haven't checked but I can fix it here too: vercel/next-plugins#162

@orta
Copy link
Contributor Author

orta commented May 7, 2018

That won’t fix it I’m afraid, it should still have the same infinite loop behavior (the example repo is using babel7)

@jstcki
Copy link
Contributor

jstcki commented May 7, 2018

@orta I didn't mean that it's already fixed there but that I could incorporate your fix into that PR 😃 (which would be the right place to fix it I think).

@orta
Copy link
Contributor Author

orta commented May 7, 2018

Ah, yeah, good thinking 👍

@jstcki
Copy link
Contributor

jstcki commented May 7, 2018

@orta I can't seem to reproduce your issue though neither in Safari, Chrome, FF – so I'm not sure if a fix is needed 🤔.

Your repro has one (unrelated) problem however: you shouldn't wrap the page in <html> and <body>. This should be enough:

import Head from "next/head"

export default () => (
  <div style={{ textAlign: "center", paddingTop: "90px", fontFamily: "Avenir Next" }}>
    <Head>
      <title>Hi!</title>
    </Head>
    <p>Hello there, please change this text</p>
  </div>
)

@orta
Copy link
Contributor Author

orta commented May 7, 2018 •
edited
Loading

Ah dang, I committed the fix - wasn't meant to

Master is reverted to having it commented out

@jstcki
Copy link
Contributor

jstcki commented May 7, 2018

Yeah, I noticed 😃 but I don't get the infinite reload loop with or without your fix.

@DullReferenceException
Copy link

I'm intermittently getting an infinite reload loop with the integration tests. I thought it was due to the changes in my PR at first, but checking out master, I can still reproduce. It makes me wonder if this reload loop even relates to TypeScript or if there's an issue with HMR overall.

@timneutkens
Copy link
Member

Something similar to the fix @orta described is now in the core and out on next@canary, @orta could you verify if you still run into it?

@orta
Copy link
Contributor Author

orta commented Jun 17, 2018

I've just given it a shot and I'm afraid I still get infinite loops, video: https://ortastuff.s3.amazonaws.com/vids/peril-next-canary.mov

@ex3ndr
Copy link
Contributor

ex3ndr commented Jun 20, 2018 •
edited
Loading

Same as @orta here and also typescript. But not stable. Refreshing sometimes helps. In my case this happens only in Safari.

@landvibe
Copy link

same here.
next v6.1.1, typescript, only safari

@timneutkens
Copy link
Member

Will probably be fixed by #4639

@timneutkens timneutkens mentioned this issue Jul 16, 2018
Merged
23 tasks
@lock lock bot locked as resolved and limited conversation to collaborators Jul 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Webpack 4, react-error-overlay, react-loadable (major) timneutkens/next.js
6 participants
@orta @jstcki @ex3ndr @landvibe @DullReferenceException @timneutkens