Defining `global: 'globalThis'` variable will replace `global.css` as `"globalThis".css` on building

[JounQin]

Describe the bug

As title

Reproduction

https://github.com/JounQin/test/tree/vite_define

System Info

System:
    OS: macOS 12.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 17.84 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.5 - ~/.nvm/versions/node/v12.22.5/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v12.22.5/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 91.0.2
    Safari: 15.0
  npmPackages:
    vite: ^1.0.0-rc.13 => 1.0.0-rc.13

Used Package Manager

yarn

Logs

vite:config env mode: production +0ms
  vite:config env: {} +1ms
  vite:config config resolved in 94ms +1ms
Building production bundle...
  vite:build:resolve /src/main.js --> /Users/JounQin/Workspaces/Local/test/src/main.js +0ms
[vite] Build errored out.
Error: Could not resolve './"globalThis".css' from src/main.js
    at error (/Users/JounQin/Workspaces/Local/test/node_modules/rollup/dist/shared/rollup.js:151:30)
    at ModuleLoader.handleResolveId (/Users/JounQin/Workspaces/Local/test/node_modules/rollup/dist/shared/rollup.js:19862:24)
    at /Users/JounQin/Workspaces/Local/test/node_modules/rollup/dist/shared/rollup.js:19856:26 {
  code: 'UNRESOLVED_IMPORT',
  watchFiles: [
    '/Users/JounQin/Workspaces/Local/test/index.html',
    '/Users/JounQin/Workspaces/Local/test/src/main.js',
    '/Users/JounQin/Workspaces/Local/test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    '/Users/JounQin/Workspaces/Local/test/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
    '/Users/JounQin/Workspaces/Local/test/node_modules/@vue/shared/dist/shared.esm-bundler.js',
    '/Users/JounQin/Workspaces/Local/test/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
    '/Users/JounQin/Workspaces/Local/test/src/App.vue',
    '/Users/JounQin/Workspaces/Local/test/src/App.vue?vue&type=script&lang.js',
    '/Users/JounQin/Workspaces/Local/test/src/App.vue?vue&type=template&id=601a3950&lang.js'
  ]
}

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.

[JounQin]

Oh, it's "globalThis".css after transformed, it is really bad to auto JSON.stringify variables.

[y1d7ng]

try GLOBAL instead of global in define, described in the doc

Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using define for CONSTANTS only.

[JounQin]

@OneNail I'm trying to define global for 3rd-party modules like available-typed-arrays.

It is a very common usage for a bundler.

[haoqunjiang]

No, it's not common. Have you ever seen webpack recommend users to use DefinePlugin for things other than constants?

Should use globalThis.global = globalThis instead.

[JounQin]

@sodatea

No, it's not common. Have you ever seen webpack recommend users to use DefinePlugin for things other than constants?

Should use globalThis.global = globalThis instead.

It's a bad practice to modify globalThis AFAIK, even worse for a variable I'm not using.

Have you ever seen webpack recommend users to use DefinePlugin for things other than constants?

Using global: 'globalThis' in DefinePlugin is fine, it works perfectly.

webpack@<=4 polyfills global automatically, webpack@5 requires users to define it manually.

[JounQin]

See also inspect-js/has-symbols#11 (comment) and browserify/node-util#62 (comment)

I'm raising PRs for many related packages to use globalThis if available, like inspect-js/available-typed-arrays#13, inspect-js/which-typed-array#52 and inspect-js/is-typed-array#53

But, define should be more powerful IMO.

[haoqunjiang]

It's a bad practice to modify globalThis AFAIK, even worse for a variable I'm not using.

Polyfills do this all the time.

Using global: 'globalThis' in DefinePlugin is fine, it works perfectly.

"is fine" != "recommended". Webpack implemented a dedicated plugin for the global shimming, instead of reusing DefinePlugin https://webpack.js.org/configuration/node/#nodeglobal

But, define should be more powerful IMO.

Yeah, but not for this use case.

[JounQin]

Polyfills do this all the time.

webpack@4 polyfills global by transforming, not globalThis.global = globalThis.

Webpack implemented a dedicated plugin for the global shimming, instead of reusing DefinePlugin

Then, this feature is missing in vite.

[haoqunjiang]

Then, this feature is missing in vite.

Feel free to write a plugin for this. Should be very straightforward.

Or you can check out https://github.com/snowpackjs/rollup-plugin-polyfill-node I'm not sure if it works though.

[JounQin]

Feel free to write a plugin for this. Should be very straightforward.

Yeah, I'm going to write a plugin maybe vite-plugin-provide.

Or you can check out snowpackjs/rollup-plugin-polyfill-node I'm not sure if it works though.

This one won't work on vite development, at least.

[ljharb]

A node module bundler that does not provide node globals is broken; it's unfortunate vite won't try to function correctly.