server.origin breaks HMR (tailwind JIT)

[leevigraham]

Describe the bug

Setting the server.origin property in vite.config.ts breaks tailwind JIT hmr.

Fixing the vite version to 2.5.10 fixes the issue (server.origin didn't exist so that makes sense).

Reproduction steps in the repro README: https://github.com/leevigraham/vite-hmr-issue-repro/blob/main/README.md

Reproduction

https://github.com/leevigraham/vite-hmr-issue-repro

This is the simplest repro I could make. It uses the built in vite dev server.

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 85.16 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.4 - /usr/local/bin/node
    npm: 6.14.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Edge: 90.0.818.56
    Firefox: 88.0
    Firefox Developer Edition: 94.0
    Safari: 15.0
    Safari Technology Preview: 15.4
  npmPackages:
    vite: ^2.6.4 => 2.6.10 

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[engram-design]

Also seeing the same thing on 2.6.x, rolling back to 2.5.10 fixes this issue.

[y1d7ng]

Task: Update the tailwind body class in templates/index.twig

Can't find the file templates/index.twig

[leevigraham]

@OneNail my mistake… I've updated the readme. In both cases the file that should be edited is src/index.html

[khalwat]

Am seeing this issue as well

[innocenzi]

FWIW, here's an issue from someone else who got this issue with Laravel Vite (https://github.com/innocenzi/laravel-vite/issues/146).

I'm not sure how origin.server could be related to that problem though - it sounds like there is an underlying HMR issue, and that Tailwind JIT breaking is a side effect of that?

[github-actions]

Hello @leevigraham. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[y1d7ng]

@OneNail There's a reproduction repo in the original ticket: https://github.com/leevigraham/vite-hmr-issue-repro with updated readme.

I switched the node version to 12.x and this problem was reproduced, I removed the need reproduction label.

[leevigraham]

I switched the node version to 12.x

@OneNail Oh I didn't even think about an older version of node being a possible issue. Could you reproduce the issue with node 14 / 16?

[y1d7ng]

I switched the node version to 12.x

@OneNail Oh I didn't even think about an older version of node being a possible issue. Could you reproduce the issue with node 14 / 16?

I tried the 14.x version, it works fine.

[leevigraham]

@khalwat @engram-design Can you confirm the issue is fixed on Node 14 / 16… It doesn't seem to be for me here.

[Esirei]

@khalwat @engram-design Can you confirm the issue is fixed on Node 14 / 16… It doesn't seem to be for me here.

I use Node 14 on Windows, so I know it's not fixed there. I will update to Node 16 and test it out.

[Esirei]

The issue still exist on Node 16.