Chakra UI doesn't work with ESM

[BeanWei]

Description

Copy from #6661 (comment) , I faced same issue.

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.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-xfwglb?file=vite.config.ts

Chakra UI Version

2.3.5 & 2.3.7

Browser

Edge latest version

Operating System

• macOS
• Windows
• Linux

[ayoubqrt]

I'm facing the same problem here by using the vite-plugin-ssr.
Initialized my repo with pnpm create vite-plugin-ssr@latest https://github.com/ayoubqrt/vite-ssg

[nitedani]

This is on chakras side. The exports configuration in the package.json is incorrect.
Related: vitejs/vite#11299
https://publint.bjornlu.com/@chakra-ui/react@2.4.3

[arthurgailes]

It seems that Chakra is not compatible with Vite 4, see the vite issue above. Reverting to Vite 3 should fix this issue.

[DarrenBaldwin07]

I am still getting a similar error here in version 2.4.5: ››

[morrisallison]

I am still getting a similar error here in version 2.4.5: ››

My experience is the same, but the Chakra UI packages themselves seem to be fine now, it's their dependencies that are the issue now.

A number of Chakra UI's dependencies aren't Node ESM friendly; it's a rabbit hole of patches. However, those issues should probably be taken up with each respective package author.

Regardless, I agree the outcome is the same though.