Vite4 regression - TypeError: Cannot read properties of undefined

[nitedani]

Describe the bug

The only change was going from vite 3 > vite 4. It was working with vite 3 and even vite 2.

The following code throws an error on the server in development:

import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({})

(node:8) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
TypeError: Cannot read properties of undefined (reading 'extendTheme')
    at eval (/home/projects/llqijrlvr.github/src/entry.js:5:35)
    at async instantiateModule (file://file:///home/projects/llqijrlvr.github/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:53295:9)

Reproduction

https://stackblitz.com/github/nitedani/vite4-bug123

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 18.59 GB / 63.92 GB
  Binaries:
    Node: 18.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.1.3 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.46)
    Internet Explorer: 11.0.22000.120

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This is happening because Vite 4 now correctly resolves the exports field.

@chakra-ui/react declares import condition but that does not have a .mjs extension.
https://publint.bjornlu.com/@chakra-ui/[email protected]
This is why the error below is happening.

(node:8) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)

Closing as this is not a bug in Vite.

[fredguest]

@sapphi-red I just started getting the ES module warning after bumping to the latest Sveltekit which depends on Vite 4, but there's no indication about which package is causing the warning. How can I track down the relevant package?

  VITE v4.0.0  ready in 436 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
(node:13745) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
10:39:54 AM [vite-plugin-svelte] ssr compile in progress ...
10:39:55 AM [vite-plugin-svelte] ssr compile done.
package	files	  time	  avg
app  	   26	97.2ms	3.7ms

[sapphi-red]

@fredguest I think using NODE_OPTIONS="--trace-warnings" would show where it happens.

[fredguest]

I've tried adding export NODE_OPTIONS="--trace-warnings" to my .zprofile and .zshrc.
I've tried running NODE_OPTIONS="--trace-warnings" npm run dev in the console.
I've tried changing the package.json dev script to "dev": "NODE_OPTIONS='--trace-warnings' vite dev".

So far none of that changes the output of the warning at all. Is there another trick I'm missing? Does the vite dev command have it's own flags? I see a few issues that may be related? sveltejs/kit#7781, sveltejs/kit#1144, #9740

[nitedani]

Why did you decide to stop supporting these incorrect package.json exports? There are so many incorrectly configured packages out there, I think migration will be hard.

[sapphi-red]

@fredguest Umm, then, I don't have any idea other than trimming imports manually.

@nitedani What we did is not stop supporting incorrect package.json exports. That was never working with Vite. What we changed is that we stopped trying to use CJS files in any cases (#11101).

[fredguest]

@sapphi-red ok cool no worries, thanks for the help anyway. Ya I was trying to avoid manual process of elimination but it looks like the only option. I'm sure many people will start hitting that indirect ES Module waring at compile time so if there's anyway to pass a more direct warning through Vite it might be worth implementing.

[nitedani]

I think this should be considered as a bug in Vite. It stopped working because of a change in Vite. I think #11101 should be revisited.

[vexkiddy]

this is a comment from another user on a thread that is referenced above, not sure if its worth adding here:

"It seems the fix is in this PR comment.."
#10504 (review)

[hengwangsay]

i see, i have a same problem for my own project ssr-setup