npm run dev works, npm build throws a global is not defined in the browser

[vrde]

Describe the bug

In the last days I've been developing my app using vite+svelte+ts. The app imports @walletconnect/web3-provider, and I had to fight quite a lot to make it work because global, buffer, and util were missing when running the app in the browser. I ended up doing this:

• Install util and injecting it using @rollup/plugin-inject.
• Use @esbuild-plugins/node-globals-polyfill.
• Define global to globalThis.

You can see the full configuration in the file vite.config.js.

After these changes my app started working using npm run dev.

Yesterday I ran npm build and served it from a static server, and I'm back to square one: the app doesn't load and in the console I see Uncaught ReferenceError: global is not defined.

How to reproduce:

I have a repro https://github.com/vrde/dapp-template

git clone https://github.com/vrde/dapp-template.git
cd dapp-template
npm i
npm run dev

# Open the browser, the app works fine

npm build
python -m http.server --directory dist 3000

# Open the browser, the app doesn't load and throws an `Uncaught ReferenceError: global is not defined` error

I think that's an issue with vite because of the different outputs of the dev and the build commands.

(Maybe related #6065?)

Reproduction

https://github.com/vrde/dapp-template/

System Info

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 1.15 GB / 15.29 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 7.19.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chromium: 99.0.4844.51
    Firefox: 96.0
  npmPackages:
    vite: ^2.8.6 => 2.8.6

Used Package Manager

pnpm

Logs

vite:config TS + native esm config loaded in 95.03ms URL {
  href: 'file:///tmp/dapp-template/vite.config.ts',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/tmp/dapp-template/vite.config.ts',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:vite-plugin-svelte findSvelteDependencies: searching svelte dependencies in /tmp/dapp-template +0ms
  vite:vite-plugin-svelte additional vite config {
  resolve: {
    mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
    dedupe: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/ssr',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ]
  },
  ssr: { noExternal: [] }
} +3ms
  vite:vite-plugin-svelte resolved options {
  hot: false,
  compilerOptions: { css: false, dev: false, format: 'esm' },
  extensions: [ '.svelte' ],
  emitCss: true,
  preprocess: {
    defaultLanguages: { markup: 'html', style: 'css', script: 'javascript' },
    markup: [AsyncFunction: markup],
    script: [AsyncFunction: script],
    style: [AsyncFunction: style]
  },
  configFile: '/tmp/dapp-template/svelte.config.js',
  experimental: {},
  root: '/tmp/dapp-template',
  isBuild: true,
  isServe: false,
  isDebug: true,
  isProduction: true
} +6ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite-plugin-svelte',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset',
  vite:config     'inject',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: {
  vite:config       keepNames: undefined,
  vite:config       preserveSymlinks: undefined,
  vite:config       define: [Object],
  vite:config       plugins: [Array]
  vite:config     }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   resolve: {
  vite:config     dedupe: [
  vite:config       'svelte/animate',
  vite:config       'svelte/easing',
  vite:config       'svelte/internal',
  vite:config       'svelte/motion',
  vite:config       'svelte/ssr',
  vite:config       'svelte/store',
  vite:config       'svelte/transition',
  vite:config       'svelte',
  vite:config       'svelte-hmr/runtime/hot-api-esm.js',
  vite:config       'svelte-hmr/runtime/proxy-adapter-dom.js',
  vite:config       'svelte-hmr'
  vite:config     ],
  vite:config     mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   ssr: { noExternal: [] },
  vite:config   configFile: '/tmp/dapp-template/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/tmp/dapp-template',
  vite:config   base: '/',
  vite:config   publicDir: '/tmp/dapp-template/public',
  vite:config   cacheDir: '/tmp/dapp-template/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +21ms
vite v2.8.6 building for production...
transforming (1) index.html  vite:vite-plugin-svelte transform returns compiled js for /tmp/dapp-template/src/App.svelte +447ms
  vite:vite-plugin-svelte transform returns compiled js for /tmp/dapp-template/src/lib/Header.svelte +63ms
transforming (5) src/lib/Header.svelte  vite:vite-plugin-svelte transform returns compiled js for /tmp/dapp-template/src/lib/SignMessage.svelte +89ms
  vite:vite-plugin-svelte transform returns compiled js for /tmp/dapp-template/src/lib/ConnectWallet.svelte +143ms
✓ 197 modules transformed.
dist/index.html                  0.47 KiB
dist/assets/index.905dfc2f.js    6.32 KiB / gzip: 2.67 KiB
dist/assets/vendor.416b51a2.js   771.60 KiB / gzip: 292.99 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

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/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.

[vrde]

Update: I was able to build the project changing my configuration. Ironically enough, now npm run dev doesn't work.

This is my vite.config.js:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import inject from "@rollup/plugin-inject";
import nodePolyfills from "rollup-plugin-polyfill-node";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  // Node.js global to browser globalThis
  define: {
    global: "globalThis",
  },
  plugins: [
    svelte(),
    inject({
      util: "util/",
    }),
  ],
  build: {
    rollupOptions: {
      plugins: [nodePolyfills()],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
});

Update 2: Both dev and build work

I merged the two configurations and now both npm run dev and npm build work. I have no idea why, but it works. The original issue is not fixed yet, the fact that dev works and build doesn't it's still really puzzling.

The new configuration looks like this:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import inject from "@rollup/plugin-inject";
import nodePolyfills from "rollup-plugin-polyfill-node";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  // Node.js global to browser globalThis
  define: {
    global: "globalThis",
  },
  plugins: [
    svelte(),
    inject({
      util: "util/",
    }),
  ],
  build: {
    rollupOptions: {
      plugins: [nodePolyfills()],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis",
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
        }),
      ],
    },
  },
});

[WaterlessPiano2]

I got the build complete, and dev working by only adding

define: { global: "globalThis", },

to the vite.config file

The preview command throws an error like ReferenceError: Buffer is not defined on the browser console.

Updating my config like yours didn't help with this error.

[Nuzzlet]

Hey guys. I found another solution to this problem. I simply import wallet connect via:
import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js';
and to get the types working, I made a d.ts file with:
declare module '@walletconnect/web3-provider/dist/umd/index.min.js' { import WalletConnectProvider from '@walletconnect/web3-provider/dist/esm/index'; export default WalletConnectProvider }

[RayJason]

without other dependencies, just add (window.global as any) = globalThis in main.ts

[Gorthog]

esbuild is used only in dev, rollup for production. that's why it's working when you merge both of the config files.

[bluwy]

After setting define: { global: "globalThis" }, I don't get errors in build too with Vite 3. It's also usually safer to implement these polyfills as runtime code like globalThis.global = globalThis too. I'll go ahead and close this as it's not reproducible, and nodejs modules support in browsers isn't part of Vite philosophy.