Failed to preview production build

[johnson86tw]

Hi @sodatea,

I used this plugin in my project and it works on the dev server but failed on the preview build with the error process is not defined

When I used my custom configuration like the following, it works both on the dev server and the preview build

import path from 'path'
import WindiCSS from 'vite-plugin-windicss'
import nodeStdlibBrowser from 'node-stdlib-browser'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  root: 'demo/',
  plugins: [
    vue(),
    WindiCSS(),
    // https://github.com/niksy/node-stdlib-browser#vite
    {
      ...inject({
        global: [
          require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
          'global',
        ],
        process: [
          require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
          'process',
        ],
        Buffer: [
          require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
          'Buffer',
        ],
      }),
      enforce: 'post',
    },
  ],
  resolve: {
    // Enable polyfill node used in development to prevent from vite's browser compatibility warning
    alias: {
      'vue-dapp': path.resolve(__dirname, './src/index.ts'),
      ...nodeStdlibBrowser,
    },
  },
  optimizeDeps: {
    include: ['buffer', 'process'], // pre-bundle buffer and process
    // Enable polyfill node used in development, refer to https://github.com/sodatea/vite-plugin-node-stdlib-browser/blob/b17f417597c313ecd52c3e420ba8fc33bcbdae20/index.cjs#L17
    esbuildOptions: {
      target: 'esnext', // Enable Big integer literals
    },
  },
  build: {
    target: 'esnext', // Enable Big integer literals
    commonjsOptions: {
      transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
    },
  },
})

But in my case, the vite complains Sourcemap for "xxxx" points to missing source files as I noted here:

• https://github.com/niksy/node-stdlib-browser/issues/25#issue-1502344412

Do you have any insight about how to adjust the configuration to let it work?

[johnson86tw]

With the following configuration and Vite v3.2.4, it works without Sourcemap for "xxx" points to missing source files warning

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import WindiCSS from 'vite-plugin-windicss'
import nodeStdlibBrowser from 'node-stdlib-browser'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  root: 'demo/',
  plugins: [vue(), WindiCSS()],
  resolve: {
    alias: {
      'vue-dapp': path.resolve(__dirname, './src/index.ts'),
      ...nodeStdlibBrowser, // Add browser polyfills of Node.js built-in libraries for Vite projects
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      inject: [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
      target: 'esnext', // Enable Big integer literals
    },
  },
  build: {
    target: 'esnext', // Enable Big integer literals
    commonjsOptions: {
      transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
    },
    rollupOptions: {
      plugins: [
        // @ts-ignore
        inject({
          global: [
            require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
            'global',
          ],
          process: [
            require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
            'process',
          ],
          Buffer: [
            require.resolve('node-stdlib-browser/helpers/esbuild/shim'),
            'Buffer',
          ],
        }),
      ],
    },
  },
})

But in Vite v4.0.2, it complains an error when starting the dev server (but works well on the website

The error message is as follows