[HMR] is extremely slow after v8.1.1-canary.25 update

[michael-land]

Bug report

Describe the bug

for 8.1.1-canary.24 release, HMR takes about 0.2 seconds on my 2016 MacBook pro.
for 8.1.1-canary.25~28 release, HMR takes about 1.0+ second on my 2016 MacBook pro.

To Reproduce

1. install [email protected]+
2. start server
3. trigger HMR by adding any content

Expected behavior

HMR should stay fast.

System information

• OS: [e.g. macOS, Windows] macOS
• Browser (if applies) [e.g. chrome, safari] : CHROME
• Version of Next.js: [e.g. 6.0.2]: 8.11-canary.25

Additional context

Add any other context about the problem here.

[Timer]

@xiaoyu-tamu Hi! I'm not able to reproduce this, so I'll need a bit more information.

Are you using TypeScript? How large is your project? Can you provide a reproducible demo?

[michael-land]

Yes. I am using Typescript. It's a monorepo project, but I don't think it matters.

[michael-land]

The two videos below will show the time difference. Once file saved, the top left text will change. and the right side terminal will print compiling...

From the two videos, you can see the canary 28 HMR time is longer than canary 24.

My project has only 20 components and 5 pages right now. I cannot reproduce this when project size is small, ( with a single page and one div contain hello world text).

8.1.1 canary 24 video: https://www.youtube.com/watch?v=Q73v9UnvMmo&feature=youtu.be
8.1.1 canary 28 video: https://www.youtube.com/watch?v=XnXabqTqEu8&feature=youtu.be

[Timer]

Thanks for the more information! Does this persist for every reload or only the first?

Can you please share your project?

[michael-land]

I will try to make a minimal reproducible demo later.

[joshleblanc]

I wanted to echo @xiaoyu-tamu sentiment. I converted a project to typescript and found the HMR times increased dramatically. I can confidently say it happens on every reload.

project: https://github.com/HorizonShadow/aa2gd/tree/develop

[evenchange4]

It becomes slow because fork-ts-checker-webpack-plugin (#7114) checks types on each compilation in development. Here is a workaround to disable the plugin:

// next.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  webpack: config => {
    config.plugins = config.plugins.filter(
      plugin => !(plugin instanceof ForkTsCheckerWebpackPlugin),
    );

    return config;
  },
};

[Timer]

@HorizonShadow the code you provided has no TypeScript. Can you please provide/point us to the TypeScript version?

To reiterate: we cannot reproduce this and need a full reproduction to get it fixed. Thank you for your understanding.

[joshleblanc]

@Timer Sorry, I removed it due to too many issues. On top of it being slow, it wasn't reloading properly and was serving old components.

https://github.com/HorizonShadow/aa2gd/tree/7e6a9ee0a0b52ce33bf5e0b11d1e95b02353b137

This is the latest version before I started removing it.

[ijjk]

@HorizonShadow it looks this is related to microsoft/TypeScript#30663 If you upgrade to the latest version of TypeScript the speed increases dramatically

[bkniffler]

This seems to not work anymore with latest canary, did anything change?

[tomaswitek]

Why do we need ForkTsCheckerWebpackPlugin in the first place?
It's much faster in my opinion let babel to remove types while developing and do a type check in a separate script.

This approach is described for example here: https://iamturns.com/typescript-babel/

[bkniffler]

I'm okay with having it (since the whole point of typescript is type safety and ForkTsCheckerWebpackPlugin is maximum level). But some people only want dev time linting, so some kind of configurable opt-out would be really cool.

[adamsoffer]

Hey @Timer 👋 - hot reloading doesn't work in my project either for some reason. I see the little triangle animation on the bottom right of the screen when I make changes, but nothing happens. I'm on the latest version of next and typescript. Any ideas?

To reproduce:

1. git clone -b as/explorer-streamflow [email protected]:livepeer/livepeerjs.git
2. cd packages/explorer-streamflow
3. yarn && yarn dev

[adamsoffer]

ah nevermind. I found the culprit. For some reason, this provider breaks hot reloading: https://github.com/tokenfoundry/react-metamask

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.