How to use imports in content script with Vite without external library like https://crxjs.dev/vite-plugin? - vite

Question

There's an issue with importing es modules into the content script:
(How to import ES6 modules in content script for Chrome Extension)
Maybe there is a way to build the content script in one file to resolve this?
I'm using this boilerplate - https://github.com/JohnBra/vite-web-extension. Here's what my vite config looks like:
import react from "#vitejs/plugin-react-swc";
import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import makeManifest from "./utils/plugins/make-manifest";
const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");
const IS_DEV = process.env.DEV === "true";
export default defineConfig({
resolve: {
alias: {
"#src": root,
"#assets": assetsDir,
"#pages": pagesDir,
},
},
plugins: [react(), makeManifest(), copyContentStyle()],
publicDir,
build: {
minify: !IS_DEV,
outDir,
sourcemap: IS_DEV,
emptyOutDir: IS_DEV,
rollupOptions: {
input: {
// devtools: resolve(pagesDir, 'devtools', 'index.html'),
// panel: resolve(pagesDir, "panel", "index.html"),
content: resolve(pagesDir, "content", "index.ts"),
background: resolve(pagesDir, "background", "index.ts"),
popup: resolve(pagesDir, "popup", "index.html"),
// newtab: resolve(pagesDir, "newtab", "index.html"),
// options: resolve(pagesDir, "options", "index.html"),
},
output: {
entryFileNames: (chunk) => {
return `src/pages/${chunk.name}/index.js`;
},
},
},
},
});
I tried having a separate vite config for the content scripts to build it in one file. But, I was not successful
Here's what the config for that looks like:
import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import { viteSingleFile } from "vite-plugin-singlefile";
const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");
const IS_DEV = process.env.DEV === "true";
export default defineConfig({
resolve: {
alias: {
"#src": root,
"#assets": assetsDir,
"#pages": pagesDir,
},
},
plugins: [copyContentStyle(), viteSingleFile()],
publicDir,
build: {
minify: !IS_DEV,
outDir,
sourcemap: IS_DEV,
emptyOutDir: IS_DEV,
rollupOptions: {
input: {
content: resolve(pagesDir, "content", "index.ts"),
},
output: {
dir: `src/pages/content`,
},
},
},
});

Answer 1

I ended up having a separate vite config for the content script, which looks like:
import { resolve } from "path";
import { defineConfig } from "vite";
import { viteSingleFile } from "vite-plugin-singlefile";
const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const outDir = resolve(__dirname, "dist", "src", "pages", "content");
const IS_DEV = process.env.DEV === "true";
export default defineConfig({
resolve: {
alias: {
"#src": root,
"#pages": pagesDir,
},
},
plugins: [viteSingleFile()],
build: {
copyPublicDir: false,
minify: !IS_DEV,
outDir,
sourcemap: IS_DEV,
emptyOutDir: IS_DEV,
rollupOptions: {
input: {
content: resolve(pagesDir, "content", "index.ts"),
},
output: {
entryFileNames: "index.js",
},
},
},
});
And, I run it all with:
"scripts": {
"build:general": "vite build",
"build:content": "vite build --config vite.contentScript-config.ts",
"build": "run-p build:*",
"dev:general": "vite build --watch --mode development",
"dev:content": "vite build --config vite.contentScript-config.ts --watch --mode development",
"dev": "run-p dev:*"
},