When I import the UMD library "store2" in Vite, it seems that the build process is not handled correctly.

[LiuRhoRamen]

Describe the bug

"store2"(https://www.npmjs.com/package/store2) is a third-party UMD package. When I import it in my project and build it as a UMD library, if the environment used is AMD, an error occurs indicating that "store2" is undefined.

Then I looked at the generated code and found that Vite did not handle the AMD logic correctly in "store2". This causes "store2" to become an AMD package if the referencing environment is AMD.

This code snippet represents the UMD logic of the "store2" library:

This code snippet represents the logic after building with Vite. It can be observed that if the environment is AMD, "store2" cannot be properly exported using the ESM format, resulting in an error:

Reproduction

https://github.com/LiuRhoRamen/vite-debug

Steps to reproduce

In the "dist" directory of the "vite-debug" project, two files have been built: "my-lib.umd.js" built with Vite and "wp.js" built with webpack for a comparison.

System Info

System:
    OS: macOS 13.0
    CPU: (12) x64 Apple M2 Pro
    Memory: 20.91 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    Watchman: 2023.02.06.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 112.0.2
    Firefox Developer Edition: 111.0
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

yarn

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]

Duplicate of #5900

[LiuRhoRamen]

Duplicate of #5900

@sapphi-red Thank you for your response. I have reviewed #5900, combined with the issue I raised, and found that the reasons are somewhat different.

I noticed that the umd syntax of the 'store2' library is slightly different from the usual:

;(function(window, define) {
  ......
   if (typeof define === 'function' && define.amd !== undefined) {
        define('store2', [], function () {
            return store;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = store;
    } else {
        // expose the primary store fn to the global object and save conflicts
        if (window.store){ _.conflict = window.store; }
        window.store = store;
    }
})(this, this && this.define);

As you can see, it passes 'this' into the logic through closure and checks the 'define' variable on the passed 'this', rather than the actual global variable 'define'.

After the code is built, Vite will change the passed 'this' to the global 'window', while webpack will bind the passed 'this' to the module's context. Therefore, webpack will not encounter any issues:

Vite:

var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};

Webpack:

// Create a new module (and put it into the cache)
var module = __webpack_module_cache__[moduleId] = {
    exports: {}
};
__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);

I'm not sure if the umd syntax, like the one used in store2, is reasonable. However, considering compatibility, will Vite consider adopting a similar approach?"

[sapphi-red]

Ah, I see. this seems to be replaced by common js plugin.

[gecugamo]

I'm experiencing what looks to be the same issue. Has anyone found a workaround?

[sapphi-red]

I guess rollup/plugins#1618 would fix this.

[sapphi-red]

#18231 includes rollup/plugins#1618 and will be released in v6.