Cannot use css-in-js solution with react template

[wcastand]

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

repo

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

[yyx990803]

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.

[nc]

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.

[yyx990803]

@nc this issue is way out of date. Your issue is likely completely different, so please open new ones with proper reproduction instead of commenting on old ones.