Cannot use css-in-js solution with react template
Describe the bug
I know the react template is not a priority and it's probably specific to react but just in case.
I'm trying this out with typescript and the react template and was setting up styled-components
and I got this error in the console of chrome.
Uncaught SyntaxError: The requested module '/@modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js' does not provide an export named 'default'
Reproduction
yarn
yarn dev
System Info
- required
vite
version: vite v0.14.3 - required Operating System: macOS Catalina 10.15.4
- required Node version: v12.16.3
- Optional:
- yarn version: v1.16.0
- react version: 16.13.1
- styled-components version : 5.1.0
Vite by default expects all dependencies to ship ES modules, in this case, the dependency in question is using cjs syntax.
What you can do for now is use Snowpack (1.x) alongside Vite - yarn add -D snowpack
then run a script of snowpack install
to pre-bundle styled-components
into a single ESM file. Vite will provide built-in support for this soon.
Any update on this - looking to use styled-components with Vite, but right now it's reloading the page for every style change vs HMR.