This PR is packaged and the instant preview is available (141fd11).

Install it locally:

• npm

npm i -D https://pkg.pr.new/webpack@141fd11

• yarn

yarn add -D https://pkg.pr.new/webpack@141fd11

• pnpm

pnpm add -D https://pkg.pr.new/webpack@141fd11

CodSpeed Performance Report

Merging #20107 will not alter performance

_{Comparing fix-external-esm (141fd11) with main (cbac96e)}

Summary

✅ 69 untouched

Thank you @hai-x you are beyond awesome!!!

Edit: The code runs properly with this PR! My mistake for upgrading webpack in the wrong yarn workspace. (Companion uses nested workspaces and I wasn't paying close enough attention to which one is used for the packaging build...)

You can read or ignore the rest of this up to the final "minor footnote" about the github-actions bot.

I'm afraid this current attempt didn't help. THIS WORKED!
FWIW, the error appears to be related to the combination of external modules and multiple entry points. I suspect so because the code runs when called from one place, but not from another. For example, in the following output I've added a bunch of console.log calls around the call to new Canvas() and its callers. If I call it via getCachedRenderOrGeneratePlaceholder directly if fails in the 'production'-packaged code; if called via drawButtonImageUnwrapped, which is executed in a separate thread in the standard code, it succeeds:

The test-code: (drawButtonImageUnwrapped is called later in a renderer thread)

console.log('test GraphicsController at init')
try {
 this.getCachedRenderOrGeneratePlaceholder(location)
 //GraphicsRenderer.drawButtonImageUnwrapped(this.#drawOptions, buttonStyle, location, undefined)
} catch (e) {
	this.#logger.error(`Attempt failed for ${JSON.stringify(location)}! ` + e )
}

the result:

test GraphicsController at init
getCachedRenderOrGeneratePlaceholder: {"pageNumber":1,"column":0,"row":1}
Creating new Image object.
About to create canvas
 error Graphics/Controller Attempt failed for {"pageNumber":1,"column":0,"row":1}! ReferenceError: __WEBPACK_EXTERNAL_MODULE__napi_rs_canvas_a643e547_Canvas___0 is not defined

drawButtonImageUnwrapped new Image for {"pageNumber":1,"column":0,"row":1}
About to create canvas
Created canvas
Got context2d
Set oversampling
drawButtonImageUnwrapped new Image done for {"pageNumber":1,"column":0,"row":1}

In fact calling drawButtonImageUnwrapped itself in my inserted test-code (commented out above), will crash in the production-packaged code but not when called from the renderer thread. For some reason, though, my try-catch isn't being honored in that case, so the output isn't as nice. (And again, everything runs fine in unpackaged or dev-packaged code.)

Minor footnote: FWIW, if you have control of the github-actions bot output, the correct syntax for yarn (probably yarn "2", i.e. 4.10) is:

yarn add -D webpack@https://pkg.pr.new/webpack@f4b3582

(i.e. needs 'webpack@' before the URL)

Oh wait! It does work! I upgraded the wrong yarn workspace.

On that note, webpack from this PR identifies itself as 5.102.1 during run time. It might be useful, if possible, to add something to differentiate it from the release version, so we're certain I'm running the correct version... I'll have to be more vigilant in the future too...

@hai-x I am fine with this changes, let's wait @xiaoboost review too

i think it probably wanted to tag “xiaoxiaojx“, not me(xiaoboost)?

i think it probably wanted to tag “xiaoxiaojx“, not me(xiaoboost)?

Yeah, Sorry to bother you. 😂