Vite: 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
viteversion: 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
bug
wcastand
>All comments
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.
yyx990803
on 13 May 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings
Related issues
jakobrosenberg
路
3Comments
wobsoriano
路
4Comments
ciaoben
路
4Comments
albertog
路
4Comments
shen-zhao
路
3Comments
Most helpful comment
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 snowpackthen run a script ofsnowpack installto pre-bundlestyled-componentsinto a single ESM file. Vite will provide built-in support for this soon.