BUFFER IS NOT DEFINED, in built app | Vite Land | Page 1

worthy belfry Nov 24, 2022, 4:43 PM

#

@vagrant hull have you solve this Buffer issue?

vagrant hull Nov 25, 2022, 10:00 AM

#

@worthy belfry

#

Yes

#

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'


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

    
    ],
        },

    }
})```

#

npm i buffer

#

Then in whichever file I used Buffer:

#

import { Buffer } from 'buffer'

vagrant hull Nov 25, 2022, 10:45 AM

#

(The vite config is missing the rollup inject plugin import statement)

worthy belfry Nov 25, 2022, 12:03 PM

#

import { inject } from '@rollup/plugin-inject';

#

?

vagrant hull Nov 25, 2022, 1:16 PM

#

npm install @rollup/plugin-inject --save-dev

#

import inject from '@rollup/plugin-inject';

worthy belfry Nov 25, 2022, 9:27 PM

#

hmmmn, interesting. this one is working in local dev but not in production build

import inject from '@rollup/plugin-inject';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(() => {
  return {
    rollupOptions: {
      plugins: [
        inject({ Buffer: ['buffer', 'Buffer']}),
      ],
    },
    plugins: [
      qwikCity(),
      qwikVite(),
      tsconfigPaths(),
    ],
    preview: {
      headers: {
        'Cache-Control': 'public, max-age=600',
      },
    },
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
            global: 'globalThis',
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
          }),
        ]
    }
    },
  };
});

#

@can you send also your tsconfig.json?

worthy belfry Nov 25, 2022, 9:52 PM

#

Replicated it here https://stackblitz.com/edit/qwik-starter-k7o6hs?file=vite.config.ts
run yarn build && yarn start