Fix issue with vite dev mode (#3533)

Fix issue with vite not compiling the esbuild/rollup polyfills well but manually adding buffer polyfill in entrypoint Example error from the esbuild globals plugin The injected path "/home/cdiesh/src/jbrowse-components/embedded_demos/jbrowse-react-linear-genome-view-vite/node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external
GMOD · Feb 22, 2023 · 9ca507e · 9ca507e
1 parent 3212b93
commit 9ca507e
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 216 deletions.
diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vite/package.json b/embedded_demos/jbrowse-react-linear-genome-view-vite/package.json
@@ -11,20 +11,19 @@
     "postdeploy": "aws cloudfront create-invalidation --distribution-id E13LGELJOT4GQO --paths \"/demos/lgv-vite/*\""
   },
   "dependencies": {
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@fontsource/roboto": "^4.5.3",
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/react-linear-genome-view": "^2.0.0",
     "@types/node": "^18.11.12",
-    "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
+    "buffer": "^6.0.3",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.0"

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vite/src/main.tsx b/embedded_demos/jbrowse-react-linear-genome-view-vite/src/main.tsx
@@ -2,6 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
+import { Buffer } from 'buffer'
+
+window.Buffer = Buffer
 
 ReactDOM.render(
   <React.StrictMode>

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vite/vite.config.ts b/embedded_demos/jbrowse-react-linear-genome-view-vite/vite.config.ts
@@ -1,6 +1,3 @@
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
-import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
-import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -19,23 +16,6 @@ export default defineConfig({
       define: {
         global: 'globalThis',
       },
-      // Enable esbuild polyfill plugins
-      plugins: [
-        NodeGlobalsPolyfillPlugin({
-          process: true,
-          buffer: true,
-        }),
-        NodeModulesPolyfillPlugin(),
-      ],
-    },
-  },
-  build: {
-    rollupOptions: {
-      plugins: [
-        // Enable rollup polyfills plugin
-        // used during production bundling
-        rollupNodePolyFill(),
-      ],
     },
   },
 })