typescriptgoogle-chrome-extensionservice-workertensorflow.jsparcel

Service Worker registration failed - Uncaught ReferenceError: export is not defined


I am trying to develop a chrome extension that is using a tensorflow model in the service worker. It gets bundled by parcel. The extension works without any issues when I use an HMR server. However, after building the extension and trying to add it to Chrome, an error is thrown: Uncaught ReferenceError: $379e4f2c7c8c5f6b$exports is not defined which leads to Service worker registration failed. Status code: 15.

Many solutions propose to remove "type": "module", to use ES6, or to define a global export variable in the html script. However, they don't work for various reasons. Then, I tried to narrow down the problem based on answers that proposed it being an issue with code in the service worker. I realized that the issue is connected to the imports. Without any, both errors disappear and the service-worker works. When only using the universal-sentence-encoder import, it lets me install the extension, but throws the ReferenceError upon interacting with the extension.

import '@tensorflow/tfjs-backend-cpu/dist/index.js';
import '@tensorflow/tfjs-backend-webgl/dist/index.js';

import * as use from '@tensorflow-models/universal-sentence-encoder/dist/index.js';
import * as tf from '@tensorflow/tfjs-core/dist/index.js';

I felt that I was importing the modules correctly, especially since this works with the HMR server, but it appears that I don't? What am I doing wrong? Thank you very much for your help!

In case the issue is connected to something else, I append the json files.


manifest:

...,
    "background": {
        "service_worker": "service-worker.ts",
        "type": "module"
    },
...

tsconfig:

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es2022",
        "moduleResolution": "node"
    }
}

package

{
    "dependencies": {
        "@tensorflow-models/universal-sentence-encoder": "^1.3.3",
        "@tensorflow/tfjs": "^3.6.0",
        "@tensorflow/tfjs-converter": "^3.6.0",
        "@tensorflow/tfjs-core": "^3.6.0",
        "@tensorflow/tfjs-backend-cpu": "^3.6.0",
        "@tensorflow/tfjs-backend-webgl": "^3.6.0"
    },
    "devDependencies": {
        "@parcel/config-webextension": "^2.8.3",
        "@types/chrome": "^0.0.238",
        "@typescript-eslint/eslint-plugin": "^5.60.0",
        "@typescript-eslint/parser": "^5.60.0",
        "buffer": "^5.5.0",
        "eslint": "^8.43.0",
        "parcel": "^2.8.3",
        "process": "^0.11.10",
        "typescript": "5.1.6"
    },
    "scripts": {
        "copy-img": "if not exist \"dist/images\" mkdir \"dist/images\" && copy images \"dist/images\"",
        "start": "yarn copy-img && parcel watch manifest.json --host localhost",
        "build": "yarn copy-img && parcel build manifest.json"
    }
}

Solution

  • After trying some more, I decided to try webpack instead of parcel. So in my case here, webpack was the solution. However, I don't exactly know why this is the case.