DonTsipa
commented
1 year ago Hey, just ran into this issue myself, it seems like in bundle there are both .js and .cjs files from this package. It can be a problem because of webpack / babel configuration, that forces to use commonjs instead of es6 modules. I added "sideEffects": false to my package.json and it worked
But sideEffects can be tricky By default Typescript uses CommonJs module resolution, so you can also set
"module": "ES2020",
"target":"ES2020",
"moduleResolution": "Bundler",in your tsconfig.ts. It also will force to use only es6 module resolution Related issue on ts-loader: https://github.com/TypeStrong/ts-loader/issues/886#issuecomment-460931806
VnUgE
khlopik
So, I recently ran into a fun new issue I am having a hard time debugging. I recently switched up from using "hard-coded" message handlers to generating them dynamically at runtime. Not a single issue passing messages until that change. (Ill explain)
The background onMessage handler for that messageId is correctly registered and is actually being called despite that error in the foreground code.
Error conditions
I was having issues tracing with the debugger from the background side (couldn't repro), however I could trace with console messages to determine that the functions were still getting called despite the error and failure. However the sendMessage console error appears after the method is called, but before the promise resolves.
Example Source Code
``` TypeScript import { runtime } from "webextension-polyfill"; import { onMessage, sendMessage } from 'webext-bridge/background' import { BridgeMessage, RuntimeContext, isInternalEndpoint } from "webext-bridge"; import { JsonObject } from "type-fest"; import { cloneDeep } from "lodash"; import { debugLog } from "@vnuge/vnlib.browser"; export interface BgRuntime {
readonly state: T;
readonly onInstalled: (callback: () => Promise) => void;
readonly onConnected: (callback: () => Promise) => void;
}
export type ApiExport = {
[key: string]: Function
};
export type IFeatureApi = (bgApi?: BgRuntime) => ApiExport
export type SendMessageHandler = (action: string, data: any) => Promise
export type VarArgsFunction = (...args: any[]) => T
export interface IFeatureExport {
background: (bgApi: BgRuntime) => TFeature
foreground: () => TFeature
}
export interface IForegroundUnwrapper {
use: (api:() => IFeatureExport) => T
}
export interface IBackgroundWrapper {
register: (features: (() => IFeatureExport)[]) => void
}
export const useBackgroundFeatures = (state: TState): IBackgroundWrapper => {
const rt = { state,
onConnected: runtime.onConnect.addListener,
onInstalled: runtime.onInstalled.addListener,
} as BgRuntime
return{
register: (features:(() => IFeatureExport)[]) => {
for (const feature of features) {
const f = feature().background(rt)
for (const externFuncName in f) {
const func = f[externFuncName] as Function
const onMessageFuncName = `${feature.name}-${externFuncName}`
onMessage(onMessageFuncName, async (msg: BridgeMessage) => {
try {
if (!isInternalEndpoint(msg.sender)) {
throw new Error(`Unauthorized external call to ${onMessageFuncName}`)
}
const result = func(...msg.data)
// ---> Foreground error is raised here if pending promise is awaited
const data = await result;
return { ...data }
}
catch (e: any) {
return { bridgeMessageException: JSON.stringify(e),}
}
});
}}}}
}
export const useForegoundFeatures = (sendMessage: SendMessageHandler): IForegroundUnwrapper => {
return{
use: (feature:() => IFeatureExport): T => {
const api = feature().foreground()
const proxied : T = {} as T
for(const funcName in api){
//Create proxy for each method
proxied[funcName] = (async (...args:any) => {
const result = await sendMessage(`${feature.name}-${funcName}`, cloneDeep(args)) as any
if(result.bridgeMessageException){
const err = JSON.parse(result.bridgeMessageException)
if(result.errResponse){
err.response = JSON.parse(result.errResponse)
}
throw err
}
return result;
}) as any
}
return proxied;
}}
}
const exampleFeature = () : IFeatureExport Promise}> => ({
foreground: () => ({
exampleMethod: () => Promise.resolve() //stub method never actually called
}),
background: (state:any) => ({
exampleMethod: () => new Promise((resolve) => setTimeout(resolve, 0)) //actual background method called
})
})
//In background main.ts
const { register } = useBackgroundFeatures({})
register([ exampleFeature ])
//In foreground
const { use } = useForegoundFeatures(sendMessage)
const { exampleMethod } = use(exampleFeature)
await exampleMethod() //Mapped directly to background handler
```
Each script, popup/options/conent-script pass the correct
sendMessagefunction to theuseForegoundFeaturesmethod. ThesenMessagefunction uses the default context argument (tried explicitly setting 'background' and doesnt change).Extra steps I have taken
After debugging, it seems fairly obvious that a promise is not being properly awaited, I just need to figure out where, and why it would cause that type of exception. Big apologies if this a bonehead mistake, I have just been pulling my hair out all weekend and was hoping someone might be able to help. I have not pushed these latest changes to my repo yet (I wanted to debug first) but I can create a buggy branch if it would help seeing the entire project.