0

I'm using Vite and Svelte to develop a Chrome extension, and during build I received warnings like:

3:43:06 PM [vite-plugin-svelte] /home/mike/Code/myapp/components/Component.svelte:50:18 
'chrome' is not defined

I understand what these warnings mean (chrome isn't normally part of the browser environment) and the warnings to not affect the compiled output, however I would like to fix the warnings.

I've done some research and checked the Svelte docs and while other people are having the same issue, there doesn't seem to be a fix at present.

My svelte.config.js is simply:

import sveltePreprocess from "svelte-preprocess";

export default {
  preprocess: sveltePreprocess(),
};

Any my vite.config.ts:

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
      events: "rollup-plugin-node-polyfills/polyfills/events",
      assert: "assert",
      crypto: "crypto-browserify",
      util: "util",
      "node-fetch": "just-use-native-fetch",
    },
  },
  define: {
    "process.env": process.env ?? {},
  },
  build: {
    target: "es2020",

    rollupOptions: {
      plugins: [nodePolyfills({ crypto: true })],
      output: {
        globals: ["chrome"],
      },
    },
    commonjsOptions: {
      include: [],
    },
    minify: isMinifiying,
    emptyOutDir: false,
  },
  optimizeDeps: {
    disabled: false,
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
      target: "es2020",
    },
  },
});

How do I add support for the 'chrome' namespace to Vite config?

mikemaccana
  • 110,530
  • 99
  • 389
  • 494

0 Answers0