Chakra CLI does not work with ESM packages

[kwajiehao]

Description

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

1. Go to the sample repo
2. Run npm install
3. 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

[theluk]

+1

[OmarZeidan]

@segunadebayo Any updates on this? Facing this problem with Astro.build as well. Not sure if its because of Vite or its ChakraUI related. : )

[serverwentdown]

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 with node dist/main.js will fail.

The reason is Chakra UI doesn't work with ESM yet. The following code is an example:

// package.json
{
  "type": "module",
  "dependencies": {
    "@chakra-ui/react": "2.3.5"
  }
}
// index.js
import { Button } from '@chakra-ui/react';
// output
file:///home/projects/vitejs-vite-xfwglb/module-test/index.js:1
import { Button } from '@chakra-ui/react';
         ^^^^^^
SyntaxError: Named export 'Button' not found. The requested module '@chakra-ui/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@chakra-ui/react';
const { Button } = pkg;

    at _instantiate (https://vitejs-vite-xfwglb.w-corp.staticblitz.com/blitz.c3f3eab0760382367e86f2a862c18516376c36f4.js:6:986717)
    at <anonymous> (<anonymous>)

The root cause is mentioned in this comment: https://github.com/chakra-ui/chakra-ui/issues/6783#issuecomment-1267496257. By renaming all esm.js to esm.mjs, I managed to get the code to run.

[wladpaiva]

Running into the same issue on the @chakra-ui/cli@^1.9.0. If I only take the type: module out it works fine.

[BeanWei]

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 with node dist/main.js will fail.

The reason is Chakra UI doesn't work with ESM yet. The following code is an example:

// package.json
{
  "type": "module",
  "dependencies": {
    "@chakra-ui/react": "2.3.5"
  }
}
// index.js
import { Button } from '@chakra-ui/react';
// output
file:///home/projects/vitejs-vite-xfwglb/module-test/index.js:1
import { Button } from '@chakra-ui/react';
         ^^^^^^
SyntaxError: Named export 'Button' not found. The requested module '@chakra-ui/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@chakra-ui/react';
const { Button } = pkg;

    at _instantiate (https://vitejs-vite-xfwglb.w-corp.staticblitz.com/blitz.c3f3eab0760382367e86f2a862c18516376c36f4.js:6:986717)
    at <anonymous> (<anonymous>)

The root cause is mentioned in this comment: #6783 (comment). By renaming all esm.js to esm.mjs, I managed to get the code to run.

Same issue with me. How can we fix it?

[astahmer]

this worked for me (while keeping "type": "module" in package.json) :

• renaming my theme.ts to theme.cts
• change the theme import path in my App (from import { appTheme } from "./theme"; to import { appTheme } from "./theme.cjs";)
• change the script in package.json (from "theme": "chakra-cli tokens ./src/theme.ts" to "theme": "chakra-cli tokens ./src/theme.cts")