Working example with CRA/craco

[amorriscode]

Hey all! 👋

Love the project.

I was just wondering, has anyone successfully used vanilla-extract with create-react-app/craco? I've tried to get it working using the basic instructions but mini-css-extract-plugin v2 isn't compatible (craco is using webpack 4). It's the same error as #296.

When I downgrade mini-css-extract-plugin, I also get errors. 😅

Syntax error: Unknown word (4:7)

  2 | export {};
  3 |     if(module.hot) {
> 4 |       // 1631583113062
    |       ^
  5 |       var cssReload = require("/Users/amorriscode/dev/monthly/frontend/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
  6 |       module.hot.dispose(cssReload);

There's also a codesandbox which is close but still doesn't work. 😄

So, who is using Vanilla Extract with CRA? What'd you have to do to make it happy?

Update

I may have had it working this whole time.

I thought that it wasn't working properly because, upon inspection, this is where my CSS seemed to come from on the production build (vanilla-extract-webpack-plugin-extracted.cjs.js):

However, I cloned the official Sandbox to my computer and realized the production build produces the same result. I suppose this is expected behaviour then? 😅

[mattcompiles]

Yeah it's a bit strange. It's because webpack has no concept of virtual files and we use a technique called matchResource. However ,this causes all CSS files to seem like they're coming from a single file, which in reality they aren't.

[amorriscode]

Gotcha, thanks @mattcompiles. Sorry for the noise!