vanilla-extract
vanilla-extract copied to clipboard
vanilla-extract-css
Using with create-react-app
Hi
I just created a new create-app-app app (with typescript) and want to use vanilla-extract. There isn't much info about how to do that except https://tsh.io/blog/vanilla-extract-library/ and that doesn't work with the latest CRA.
Can you add something to the documentation on how to do this? I'm sure a lot of people would appreciate it.
The official documentation shows how to install it with Next.js: https://vanilla-extract.style/documentation/setup/#nextjs
You can bypass the babel plugin if you want to run it with SWC. However, there is a bug somewhere in Vanilla Extract that causes a PostCSS error in Next beyond [email protected], waiting for some help to get it all cleared up!
Check here for updates on the error caused by Next: https://github.com/seek-oss/vanilla-extract/issues/522
The Next.js instructions can't be used with CRA.
Anyway, since this was a new project I opted for Vite instead. That worked without issues.
You can't use vanilla-extract with plain create-react-app, however, you can use it with Craco. It allows you to override webpack config, and vanilla-extract webpack plugin seems to run without issues there.
I tried that first using instructions that I found on Google but there's version conflicts with the latest version of create-react-app
If you use yarn, you no longer need craco. You can patch react-scripts config using yarn patch command.
Not sure there's anything to resolve here outside of providing some docs on how to setup VE with create-react-app. Happy to accept a PR adding setup docs for create-react-app if someone is keen to contribute.
I installed VE in a [email protected] app and configured the webpack and babel plugin with Craco. The dev server and the tests are working fine but the production build fails because VE imports a file from node_modules:
You attempted to import node_modules/@vanilla-extract/webpack-plugin/extracted.js
which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
~~I configured a path to this folder in tsconfig using react-app-alias and it works now.~~ Edit: I registered it as an allowed path via webpack config. Is this the recommended solution or is there a better way to use VE with CRA?
~~Edit: Images don't work. The webpack config for ".vanilla.css" files mentioned in the docs doesn't work at all :/~~ Edit: Reusing the existing webpack rule but with url: false works.
For anybody else who runs into the problem mentioned by @rothsandro, this blog explains how to handle it: https://sandroroth.com/blog/vanilla-extract-cra
Closing as CRA is getting deprecated. Refer to the blog post if you still need it.
