ES Modules
Configure entrypoints to use ESM at runtime.
Currently, ESM entrypoints are opt-in, so you must configure each entrypoint with that in mind.
HTML Pages ≥0.0.1
In general, you should always make HTML pages import ESM scripts, unless you need to support old browsers.
To make a script ESM, add type="module"
:
<script src="./main.ts"></script>
<script src="./main.ts" type="module"></script>
Background ≥0.16.0
In your background script, set type: "module"
:
export default defineBackground({
type: 'module', // !code ++
main() {
// ...
},
});
WARNING
Only MV3 support ESM background scripts/service workers. When targeting MV2, the type
option is ignored and the background is always bundled into a single file as IIFE.
Content Scripts
WXT does not include built-in support for ESM content scripts. There are several technical issues that make implementing a generic solution impossible. See Content Script ESM Support #357 for details.
Instead, depending on your requirements, you can implement ESM support manually. See the ESM Content Script UI example to get started.