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"
}
}
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.