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?