I recently developed a browser extension using the foundation of https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite project.
Within the manifest file, I specified the background type as module
background: {
service_worker: "background.js",
type: "module",
},
In the background service, I dynamicallly generate inpage content-scripts like this
await chrome.scripting.registerContentScripts([
{
id: currInpageId,
matches: ["file://*/*", "http://*/*", "https://*/*"],
js: [`inpage-${inpageType}.js`],
runAt: "document_start",
allFrames: true,
world: "MAIN",
},
]);
The inpage files are provided as individual inputs in the vite.config file
input: {
...inpageTypes.reduce(
(acc, inpageType) => ({
...acc,
[`inpage-${inpageType}`]: resolve(
inpageDir,
`inpage-${inpageType}.ts`
),
}),
{}
),
},
However, upon running the extension, I encounter an error
Uncaught SyntaxError: Cannot use import statement outside a module
What steps can I take to resolve this issue?
Appreciate any assistance!