search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.28k stars 105 forks source link

Failed to resolve entry for package "@xstyled/styled-components" #278

Closed electroheadfx closed 3 years ago

electroheadfx commented 3 years ago

🐛 Bug Report

I can't run, I have resolve package issue

To Reproduce

npm init @vitejs/app "$APPNAME" -- --template react npm i npm i -S styled-components @xstyled/styled-components

I add code in app.jsx: import { x } from '@xstyled/styled-components' <x.button bg={{ _: 'purple-600', hover: 'purple-700' }} outline={{ focus: 'none' }} ring={{ focus: 2 }} ringColor={{ focus: 'purple-600-a50' }}

Test </x.button>

Expected behavior

show xstyled button

Error output

22:19:23 [vite] Internal server error: Failed to resolve entry for package "@xstyled/styled-components". The package may have incorrect main/module /exports specified in its package.json. Plugin: vite:import-analysis File: /Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/src/App.jsx at resolvePackageEntry (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chunks /dep-bc228bbb.js:32615:15) at tryNodeResolve (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chunks/dep- bc228bbb.js:32434:11) at Context.resolveId (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chunks/d ep-bc228bbb.js:32317:28) at Object.resolveId (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chunks/de p-bc228bbb.js:44708:55) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async TransformContext.resolve (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/ node/chunks/dep-bc228bbb.js:44510:23) at async normalizeUrl (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chunks/ dep-bc228bbb.js:69449:34) at async TransformContext.transform (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dis t/node/chunks/dep-bc228bbb.js:69584:57) at async Object.transform (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chu nks/dep-bc228bbb.js:44765:30) at async transformRequest (/Users/efxair/Desktop/RepoTestReactTwin/xstyled-proj/node_modules/.pnpm/vite@2.3.7/node_modules/vite/dist/node/chu nks/dep-bc228bbb.js:59029:29)

electroheadfx commented 3 years ago

ok, after test I can say xstyled work fine with classic react-app but it is incompatible with vitejs (https://vitejs.dev and pnpm (https://pnpm.io)

electroheadfx commented 3 years ago

with pnpm, the error is : ./node_modules/.pnpm/@xstyled+core@3.0.1/node_modules/@xstyled/core/dist/index.mjs Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)

gregberge commented 3 years ago

Fixed in #275

electroheadfx commented 3 years ago

I have the same error under ViteJS/React install : http://host.electroheadfx.fr/efxbox/laurent/Capturedecran2021-06-19a18.34.32.png I have not any issue with styled-components, chakra-ui (so styled-system) packages with VITE