Component mounted twice during initial build

[Jojoshua]

Describe the bug

I have been hunting down a performance issue and I've tracked it down to the root component is being initialized twice for every npm run dev

Reproduction

This was a bit difficult to reproduce exactly but I think the minimal repro https://github.com/Jojoshua/sveltekit-double-mount will work.

1. Clone the project
2. Open the project in vscode
3. run npm i
4. run npm run dev
5. Load the page & watch the vscode terminal for hi logging twice

Possibly helpful info but Note This workaround wasn't always consistent... I started removing dependencies one by one, re-installing, re-testing. Once I removed "svelte-preprocess": "^4.10.7" then I only got 1 hi

The steps I did for this was

1. Remove "svelte-preprocess": "^4.10.7" from package.json
2. run npm i
3. run npm run dev
4. Load the page & observe only 1 hi
5. Add "svelte-preprocess": "^4.10.7" back
6. run npm i
7. run npm run dev
8. Observe 2 hi's again

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor
    Memory: 5.45 GB / 15.93 GB
  Binaries:
    Node: 18.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.4.1 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 105.0.5195.127
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.50)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.80 => 1.0.0-next.80
    @sveltejs/kit: 1.0.0-next.504 => 1.0.0-next.504
    @sveltejs/package: 1.0.0-next.5 => 1.0.0-next.5
    svelte: ^3.50.1 => 3.50.1
    vite: ^3.1.3 => 3.1.3

Severity

serious, but I can work around it

Additional Information

No response

[dummdidumm]

Giving this the Vite label for now because from the stack trace it looks like this is triggered by Vite.

What I'm not quite understanding is how this has performance implications - could you be more specific what the problem is? I would hope a workaround is to do a page reload after Vite runs and did the first render twice.

[Jojoshua]

The performance hit is quite noticeable on initial load because I'm loading up a form which has a lot of components. Some of them are imported dynamically, some have link to external js/css resources. I am awaiting until everything is ready at root component but since even the root was mounted twice, we get to await all of that over again.

What I'm not sure about is if this will happen for a release build or is only a development issue.

[Rich-Harris]

I can only reproduce this by having a tab open and then running vite dev — running vite dev and then opening the tab doesn't cause the page to be rendered twice. (99% sure the first render is caused by the HMR client as it reconnects, i.e. this isn't a concern for production builds.) Are you seeing something different?

[Jojoshua]

@Rich-Harris I retested with the tab scenarios you mentioned, and I got the same result as you did...maybe that explains why I was having a hard time pinning down the issue.