tabs.executeScript encounters ReferenceError when accessing a function defined in Content Script

Question

Update: It seems the problem comes from the fact that Webpack executes each module in its own function, meaning that no modules can exist in the global scope. Is there any elegant way to solve this problem, so that I can define a function in a Webpacked content script and access it from a different content script?

Original:

in my primary content script I define a function

function foo() {
    console.log("foo")
}

In my background.js, I inject a new content script like so:

browser.tabs.query({currentWindow: true, active: true}).then(res => {
    browser.tabs.executeScript(res.id, {code: "foo()"})
})

In my tab's console, I see

VM181:1 Uncaught ReferenceError: foo is not defined
at <anonymous>:1:1

Both content scripts should be in the same execution environment, so I should be able to share functions and variables in both scripts.

I've recently added Webpack for building my Chrome extension, and I'm using Webextension-Polyfill to promisify the chrome.* API as browser.

In the old version of my code this worked fine, but now it's not working. I have a feeling it's because of Webextension-Polyfill but I honest' can't figure it out.

EDIT:

The executeScript code IS being run in the tab. I can console.log and it appears in the console. However, it doesn't seem to have access to the namespace of my existing content script.

EDIT 2:

I added another content script with

function foo() {
    console.log("foo")
}

And it's accessible from the injected script. So I guess it's something to do with Webpack.

Is it something to do with scoping in Webpack bundles?