Chakra CLI does not work with ESM packages
See original GitHub issueDescription
When running @chakra-ui/cli tokens, it doesn’t work with ESM packages
Link to Reproduction
https://github.com/kwajiehao/chakra-ui-cli-esm-bug
Steps to reproduce
- Go to the sample repo
- Run
npm install
- See error:
Error: Cannot find module 'src/theme/index.ts'
Require stack:
- <path>/.npm/_npx/de2e382d70c335ff/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js
Error: Theme file or package not found
Error: Must use import to load ES Module: <path>/chakra-ui-cli-esm-bug/src/theme/index.ts
require() of ES modules is not supported.
require() of <path>/chakra-ui-cli-esm-bug/src/theme/index.ts from <path>/.npm/_npx/de2e382d70c335ff/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from <path>/chakra-ui-cli-esm-bug/package.json.
Error: Cannot find module 'src/theme/index.ts'
Require stack:
- <path>/.npm/_npx/de2e382d70c335ff/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js
at readTheme (<path>/.npm/_npx/de2e382d70c335ff/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js:86:13)
at async run (<path>/.npm/_npx/de2e382d70c335ff/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js:103:17)
Running an older version of Chakra CLI did not fix this issue
Chakra UI Version
@chakra-ui/cli v2.1.7
Browser
No response
Operating System
- macOS
- Windows
- Linux
Additional Information
N/A
Tagging my colleague @karrui for follow ups
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:6
Top Results From Across the Web
npm chakra-ui install failing due to dependency conflicts
It seems like it created a folder running some tests. Then I ran: npm i -g @vue/cli-service-global. . Then: npm run serve-- to...
Read more >@chakra-ui/react-use-previous - NPM Package Scripts - Socket
React hook to track previous value. Version: 2.0.2 was published by segunadebayo. Start using Socket to analyze @chakra-ui/react-use-previous and its 0 ...
Read more >Installation - Chakra UI
How to install and set up Chakra UI in your project. ... Version 2 of Chakra UI is only compatible with React 18....
Read more >Gatsby Changelog | 5.3.0
The GraphQL schema: Changes to sort and aggregation fields change enables lower resource usage (significantly reduced memory usage) and faster “Building schema” ...
Read more >Build a component library with React and TypeScript
Get notified of impactful user issues, not false positives. Less alerts, way more useful signal. The LogRocket Redux middleware package adds an ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Same issue with me. How can we fix it?
Here is an example involving Vite (and thus Astro): https://stackblitz.com/edit/vitejs-vite-xfwglb?file=vite.config.ts
After running
npm run build
, starting the server withnode dist/main.js
will fail.The reason is Chakra UI doesn’t work with ESM yet. The following code is an example:
The root cause is mentioned in this comment: https://github.com/chakra-ui/chakra-ui/issues/6783#issuecomment-1267496257. By renaming all
esm.js
toesm.mjs
, I managed to get the code to run.