HMR not working in Webpack 5 (Storybook) with Vanilla Extract

Author: hanshankCreated Nov 5, 2022Updated Sep 4, 2025
Labelspending triage

Describe the bug

Hey Vanilla Extract team. I'm a dev for a rather large Tech company and we are exploring using Vanilla Extract in some of our apps. I've encountered a bug when trying to setup for Storybook/webpack, as per the steps in your wiki here: https://vanilla-extract.style/documentation/integrations/webpack/

Please see repro steps and explanation below:

Run repro repo locally and then:

  1. While Storybook is running in the browser (Chrome), navigate to src/stories/button.css.ts
  2. Make a change to the styles, e.g. change fontSize property to '100px'.

What happens HMR kicks in but Storybook can no longer find the component, due to error as shown in screenshot below. I have to do a full page reload to get the updated component

What should happen HMR kicks in and the component styles gets updated without any issues.

I don't know what's going on, but I did follow the install guide in your wiki here: https://vanilla-extract.style/documentation/integrations/webpack/

After HMR in Storybook kicks in I'm getting the following: Screen Shot 2022-11-04 at 5 17 25 PM

You might say, why is this not a Storybook issue? Well... It's using Webpack 5 and I don't see why there should be any issues since I followed the wiki steps for setting up Vanilla Extract with Webpack ‍♂️

Reproduction

https://github.com/hanshank/storybook-and-vanilla-extract

System Info

bash
System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 80.75 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 106.0.1
    Safari: 16.0
    Safari Technology Preview: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.9.1 => 1.9.1 
    @vanilla-extract/webpack-plugin: ^2.2.0 => 2.2.0 
    webpack: ^5.74.0 => 5.74.0

Used Package Manager

pnpm

Logs

No response

Validations

Source: vanilla-extract-css/vanilla-extract