Skip to main content
GenosDB uses dynamic imports with import.meta.url for loading optional modules. Some bundlers may require additional configuration to handle this correctly.

​
Vite

If using Vite, add the following to your vite.config.js:
vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['genosdb']
  }
})
This tells Vite to skip pre-bundling GenosDB, allowing the dynamic imports to resolve correctly at runtime.

​
Webpack

No additional configuration is typically required for Webpack 5+. GenosDB’s dynamic imports work out of the box with modern Webpack configurations.
If you encounter issues with older Webpack versions (< 5), consider upgrading or using a different bundler.

​
esbuild / Bun

​
Bun Example

When using Bun.build, no special configuration is needed:
bundler.ts
async function build() {
  console.time("Build");
  
  const result = await Bun.build({
    entrypoints: ['./app.js'],
    outdir: './dist',
    target: 'browser',
  });
  
  console.timeEnd("Build");
  
  if (!result.success) {
    console.error('Build failed:', result.logs);
  }
}

await build();
GenosDB’s dynamic imports resolve correctly with Bun’s native bundler.

​
Rollup

Rollup handles dynamic imports natively. No special configuration needed:
rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm' // Important: Use ESM format
  }
};

​
Parcel

Parcel 2+ supports dynamic imports out of the box. No configuration required: 
parcel build index.html

​
CDN Usage (No Bundler)

When loading GenosDB directly from a CDN, no bundler configuration is needed: 
<script type="module">
  import { gdb } from 'https://cdn.jsdelivr.net/npm/genosdb@latest/dist/index.min.js'
  
  const db = await gdb('mydb', { rtc: true });
</script>

Recommended for Quick Starts

Using the CDN is the fastest way to get started with GenosDB without any build setup.

​
Troubleshooting

Cause: Bundler is trying to statically resolve dynamic importsSolution: Configure bundler to exclude GenosDB from pre-bundling (see Vite example above)
Cause: Build target is not ESM or environment doesn’t support import.metaSolution: Ensure your bundler output format is esm and target is modern browsers
// Rollup example
output: {
  format: 'esm' // Not 'cjs' or 'iife'
}
Cause: Dynamic imports are being bundled but files aren’t copied to distSolution: Ensure GenosDB’s dist files are accessible in your output directory

​
Best Practices

  1. Use ESM output format for best compatibility
  2. Exclude GenosDB from pre-bundling if using aggressive optimization
  3. Test in production build to catch bundling issues early
  4. Use CDN for prototypes to avoid bundler complexity
For production applications, we recommend using a bundler with proper configuration to optimize bundle size and performance.

Build docs developers (and LLMs) love

Get started for freeTalk to us