Importing an ESM package that uses an esModuleInterop package is not compatible in Dev mode.

Describe the bug

I’m trying to use the onboard library, and that uses uses @gnosis.pm/safe-apps-sdk v3.0.0

@gnosis.pm/safe-apps-sdk v3.0.0 is a commonjs with the following setting:

Object.defineProperty(exports, "__esModule", { value: true });

What works:

If I import @gnosis.pm/safe-apps-sdk v3.0.0 directly it work as I would expect, in development and production.

This is how I see the transformation in dev mode:

console.log(import('@gnosis.pm/safe-apps-sdk'));
//becomes: //works fine
console.log(import('/node_modules/.vite/@gnosis_pm_safe-apps-sdk.js?v=b22e823a').then(m => m.default && m.default.__esModule ? m.default : ({ ...m.default, default: m.default })));
//in prod, becomes:
console.log(m(() => import("./index.b99bb17c.js").then(function(s) {return s.i}), [])) //works

in development it returns: Promise: {<value>: {default: class }} <<-- nice, this is what I expect to always get

What does not works:

If I import the onboard library, and that library imports @gnosis.pm/safe-apps-sdk v3.0.0, it will not work in development, but will work in production.

console.log(import('@gnosis.pm/safe-apps-sdk'));
//becomes:
console.log(import('/node_modules/.vite/src-CZKXY23H.js?v=bf0e1e2e')); //it will give me problems
//in production, it becomes:
console.log(import("./index.74d6c7e3.js").then(function(s) {return s.i})) //works

In development it returns: Promise: {<value>: {default: {default: class }, Symbol: "Module" }} <<-- this is what I do not expect to get

The generated file in node_modules/.vite/ is also a bit different:

--- node_modules/.vite/src-CZKXY23H.js (dev mode giving me trouble)
+++ node_modules/.vite/@gnosis_pm_safe-apps-sdk.js (working dev mode)
@@ -1,6 +1,6 @@
-import {
-  __commonJS
-} from "/node_modules/.vite/chunk-SULJOONQ.js?v=39947699";
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 
 // node_modules/@gnosis.pm/safe-apps-sdk/dist/src/communication/utils.js
 var require_utils = __commonJS({
@@ -499,4 +499,7 @@
     } });
   }
 });
-export default require_src();
+var gnosis_pm_safe_apps_sdk_default = require_src();
+export {
+  gnosis_pm_safe_apps_sdk_default as default
+};

Thanks a lot, I really appreciate the work the Vite team is doing. I hope I have provided enough information for this issue.

Reproduction

https://github.com/imsys/vite-onboard-test

System Info

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.20 GB / 15.37 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.3.1 - ~/.nvm/versions/node/v17.3.1/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.1/bin/npm
  Browsers:
    Brave Browser: unknown
    Chromium: 96.0.4664.110
    Firefox: 95.0.2
  npmPackages:
    vite: ^2.7.13 => 2.7.13

Used Package Manager

npm

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 https://github.com/vuejs/vue-next 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.

[FunkMonkey]

I think I have a similar problem with bayesjs, which also inlcudes __esModule = true.

The file in .vite folder ends with

var bayesjs_default = require_bayes();
export {
  bayesjs_default as default
};

The generated import looks like this and because of __esModule the __vite__cjsImport2_bayesjs.default will be returned.

import __vite__cjsImport2_bayesjs from "/node_modules/.vite/bayesjs.js?v=1ee5f5bd"; const bayes = __vite__cjsImport2_bayesjs.__esModule ? __vite__cjsImport2_bayesjs.default : __vite__cjsImport2_bayesjs;

Because of this, I get the following situation, where we are already accessing the default import using the ES module syntax, but Vite additionally tries to extract another default from the returned module, which will just be undefined:

import bayes from 'bayesjs';

console.log(bayes); // -> undefined

Is this the same bug? because I can see a nested default in @imsys example, which exactly does not exist in my case…

Thanks a lot!

[ShravanSunder]

i’m finding this a problem with web3Modal as well in dev mode. works with rollup