Interop built dependencies & broken build by unwize define config

[qnp]

Describe the bug

I managed to use Vite on my big vue-cli-3 project. However, few libs imports were raising errors, such as @mapbox/mapbox-gl-draw which was version 1.2.0.

ReferenceError: require is not defined

due to this line in the source: if (typeof module !== 'undefined' && require.main === module), which seems to be a weird way to deal with.

I have done a lot of debug to understand what is going on. I think this is related to this issue.
#1724 (comment)

It seems that in my case, @mapbox/mapbox-gl-draw is not detected to needs interop (needsInterop returns false) (while in a very minimal repro I installed 1.2.2 and needsInterop returns true).

Hence, updgrading to version 1.2.2 solved my problem. However I have to mention that during my tests I did this:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    require: {},
  },
});

which completely breaks the interop imports.

Reproduction

To see how this vite.config.js breaks imports, see this minimal repro project:
break-require-default.zip
After yarn & yarn vite, you can see the error opening localhost:3000:

// Uncaught TypeError: define_require_default is not a function
// at dep:axios:1

and if you look into generated file node_modules/.vite/axios.js: it breaks define_require_default:

// <define:require>
var define_require_default = {};

// dep:axios
var axios_default = define_require_default("./node_modules/axios/index.js");
export {
  axios_default as default
};
//# sourceMappingURL=axios.js.map

I suggest to add a security on Vite to check if vite.config.js has this breaking define of just ignore it.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 193.29 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 86.0.1
    Firefox Developer Edition: 71.0
    Firefox Nightly: 76.0a1
    Safari: 14.0.3
    Safari Technology Preview: 13.2
  npmPackages:
    vite: ^2.1.5 => 2.1.5

Used package manager:

yarn

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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.

[bluwy]

require: {} is a fairly dangerous config to do as it may cause side-effects outside of prebundling. The docs recommend to only use constants for define. Re ReferenceError: require is not defined I think a better solution is to contact the package author to fix the way they publish the library, if (typeof module !== 'undefined' && require.main === module) syntax is off as you've showed. I'm not sure if this is already addressed today, but I'll close this for now as it's an issue with the @mapbox/mapbox-gl-draw publishing