Failed to serve on production: Uncaught ReferenceError: require is not defined

[johnson86tw]

Because Vite is only for ES module, I used resolve.alias to solve the problem that Vite can't import the built-in node.js package from the third-party modules. Most of the effort is to resolve @walletconnect/web3-provider. There're lots of node.js built-in packages being used.

See these lines:

• https://github.com/chnejohnson/vue-dapp/blob/4b36617ce606258e6c58fab030d558447e706a5c/demo/index.html#L12
• https://github.com/chnejohnson/vue-dapp/blob/4b36617ce606258e6c58fab030d558447e706a5c/vite.config.ts#L12
• https://github.com/chnejohnson/vue-dapp/blob/4b36617ce606258e6c58fab030d558447e706a5c/package.json#L57

But in this scenario, when I build the demo files and run yarn serve:demo, it failed to run the app and give me: require is not defined.

This is hard to resolve. I don't know why yarn dev works but it failed on production.

Reference

• I referred dgrants to resolve this problem: https://github.com/dcgtc/dgrants/blob/main/app/vite.config.ts
• Similar problems with Vite:
  • use psd.js error: Buffer is not defined vitejs/vite#3422
  • How to shim Buffer and crypto? vitejs/vite#3126 (comment)
  • Using (Node’s) Buffer in your polymorphic Vite apps vitejs/vite#2785 (reply in thread)
  • build以后，vit preview 会报Uncaught ReferenceError: require is not defined originjs/vite-plugins#9

[johnson86tw]

The solution of this issue is using build.rollupOptions.plugins and build.commonjsOptions.transformMixedEsModules in the vite.config.ts, see below:

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  root: 'demo/',
  plugins: [vue(), WindiCSS()],
  resolve: {
    alias: {
      'vue-dapp': resolve(__dirname, './src/index.ts'),
    },
  },
  build: {
    rollupOptions: {
      plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
})

It comes from following two discussions:

• Using (Node’s) Buffer in your polymorphic Vite apps vitejs/vite#2785 (comment)
• build以后，vit preview 会报Uncaught ReferenceError: require is not defined originjs/vite-plugins#9 (comment)

[johnson86tw]

New solution implemented in PR #98 and vue3-dapp-starter