Subscribe on changes!

Cannot use css-in-js solution with react template

avatar
May 13th 2020

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
avatar
May 13th 2020

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.

avatar
nc
Feb 2nd 2021

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.

avatar
Feb 2nd 2021

@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.