chrome-extension-boilerplate-react-vite: Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

I’m getting this issue when trying to use import in background.js:

import reloadOnUpdate from 'virtual:reload-on-update-in-background-script'
import browser from 'webextension-polyfill'
import supabase from '@src/utils/supabaseClient'

reloadOnUpdate('pages/background')

/**
 * Extension reloading is necessary because the browser automatically caches the css.
 * If you do not use the css of the content script, please delete it.
 */
reloadOnUpdate('pages/content/style.scss')

console.log('background loaded')

My supabase client is simply:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://<my-project-id>.supabase.co',
  '<my-anon-key>',
)

export default supabase

My manifest:

import packageJson from './package.json'

/**
 * After changing, please reload the extension at `chrome://extensions`
 */
const manifest: chrome.runtime.ManifestV3 = {
  manifest_version: 3,
  name: packageJson.name,
  version: packageJson.version,
  description: packageJson.description,
  // options_page: "src/pages/options/index.html",
  background: {
    service_worker: 'src/pages/background/index.js',
    type: 'module',
  },
  action: {
    default_popup: 'src/pages/popup/index.html',
    default_icon: 'icon-34.png',
  },
  // chrome_url_overrides: {
  //   newtab: "src/pages/newtab/index.html",
  // },
  icons: {
    '128': 'icon-128.png',
  },
  content_scripts: [
    {
      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
      js: ['src/pages/content/index.js'],
      // KEY for cache invalidation
      css: ['assets/css/contentStyle<KEY>.chunk.css'],
    },
  ],
  // devtools_page: "src/pages/devtools/index.html",
  web_accessible_resources: [
    {
      resources: ['assets/js/*.js', 'assets/css/*.css', 'icon-128.png', 'icon-34.png'],
      matches: ['*://*/*'],
    },
  ],
}

export default manifest

Any help greatly appreciated!