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")

[DarrenBaldwin07]

Looks like this issue was "fixed" here: https://github.com/chakra-ui/chakra-ui/pull/7154 -- However, I am still getting similar errors after updating to latest version of chakra-ui/react:

Also, if I follow the instructions in the above error and make the changes inside of node_modules then run the build file again I get the following error:

Looks like chakra is trying to import from commonJS modules in almost every file

[mfb-davidmay]

If you need a work around that doesn't require renaming your file extensions; you can do the following.

1. Add a new package.json to the root of your ./themes directory
2. Paste the following into it

{
    "type": "commonjs"
}

3. Run chakra-cli tokens <path/to/your/theme.(js|ts)>

Should work, and should be non destructive since we're now telling chakra-cli that our themes aren't ESM modules.

[ptim]

Should work, and should be non destructive since we're now telling chakra-cli that our themes aren't ESM modules.

Thanks for the suggestion! Did this work for you @mfb-davidmay? I get a different error, but issue is not resolved:

✖ An error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module /source/burnsred-engage-ui/packages/ui-chakra/dist/ui-chakra.umd.js from /source/inta-frontend/src/theme/components/Button.ts not supported.
ui-chakra.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename ui-chakra.umd.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /source/burnsred-engage-ui/packages/ui-chakra/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Error [ERR_REQUIRE_ESM]: require() of ES Module /source/burnsred-engage-ui/packages/ui-chakra/dist/ui-chakra.umd.js from /source/inta-frontend/src/theme/components/Button.ts not supported.
ui-chakra.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename ui-chakra.umd.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /source/burnsred-engage-ui/packages/ui-chakra/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at require.extensions.<computed> [as .js] (/source/inta-frontend/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (/source/inta-frontend/src/theme/components/Button.ts:9:19)
    at m._compile (/source/inta-frontend/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/source/inta-frontend/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (/source/inta-frontend/src/theme/components/index.ts:9:17)
    at m._compile (/source/inta-frontend/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/source/inta-frontend/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (/source/inta-frontend/src/theme/index.ts:9:21)
    at m._compile (/source/inta-frontend/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/source/inta-frontend/node_modules/ts-node/dist/index.js:859:16)
    at /source/inta-frontend/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js:28:62
    at async importTheme (/source/inta-frontend/node_modules/@chakra-ui/cli/dist/scripts/read-theme-file.worker.js:28:18)

[mfb-davidmay]

To give you an idea of my folder structure:

src\
  themes\
    brand1\
      theme.ts (export const theme = extendTheme(...); export default theme;)
    index.ts
    package.json (type: "commonjs")
package.json (type: "module")

Then when I run yarn chakra-cli tokens ./src/themes/brand1/theme.ts it regenerates the file with my customisations here node_modules\@chakra-ui\styled-system\dist

Another suggestion is to make sure you're not mixing imports and requires. My themed components etc. are using all import and export statements.

Going in a completely different direction, perhaps you could look at not using the CLI and simply overriding the CustomThemeTypings as outlined https://github.com/chakra-ui/chakra-ui/issues/3931 - I'm investigating this at the moment to move away from the CLI, but the documentation is lacking a bit.

[felixfbecker]

This workaround doesn't seem to be working with TypeScript 5.0 anymore