Webpack loading chunk not found

Add-ons Development
#1

I’m trying to leverage Webpack’s chunk splitting. I have the base path set during runtime and when I reload the extension Webpack throws an error that it can’t load the file.

ChunkLoadError: "Loading chunk 15 failed.
(missing: moz-extension://85094c37-3d57-eb45-96f7-8f07e85e8ba1/scripts/15.js)"

I can copy that path, open it in a new tab, and see the file just fine. So I’m not really sure why Webpack is saying that it can’t find the file, other than it may not like the moz-extension protocol?

On a similar note, I have the content scripts injected at document_start, when I do a tab refresh Webpack throws this fun little error TypeError: "document.head is null". Which I know what it’s complaining about, but not sure how to properly handle it. :thinking:

#2

How is chunk splitting trying to load the chunk?

#3

Webpack adds a script tag with the source set to the target script file

<script charset="utf-8" src="moz-extension://7ab93349-b9ff-0749-84e4-a8c6b132b7d2/scripts/15.js"></script>

I have the "scripts/**/*.js" in my web_accessible_resources array, but that doesn’t appear to make a difference.

#4

Yeah, that’s unlikely to work for content scripts. It essentially injects the chunk as part of the page’s sandbox, and not the content script’s.

#5

Yeah, that’s what I thought was the case. I’m trying to figure out a way around it.
I sent Webpack’s creator a message, asking if there’s a way to handle Webpack’s chunk loading instead of having a script tag injected.

It would be more ideal to leverage chunk splitting and only loading required code for a particular page, rather than loading >15k lines of code (unminified) every time a page is loaded when a lot of it probably won’t even be used on any given page.

I was thinking would maybe the background context work, but given that many components directly interact with the page, I’m not sure that’s feasible.

#6

My solution would be to just manually have multiple entry points and make them communicate over a global or similar.