Model program assertion fails when using Webpack 5

[ilyabo]

I tried to upgrade Deck.gl's webpack 4 pure-js example (can be found here) to webpack 5. In the resulting app the layers seem to render correctly once, but then when Model._checkProgram() is called for the second time, the following assertion fails:

assert(program instanceof Program, 'Model needs a program');

Possibly, instanceof is broken by webpack 5 in certain situations. Maybe this check is too restrictive and unnecessary?

It doesn't seem to matter what particular deck.gl layers are used.

Actual Result

Here's a screen recording of the crash (I was refreshing the page several times):
https://user-images.githubusercontent.com/351828/148651276-37464c5f-5efb-4d3a-8e13-9e0af430d8eb.mp4

Here's the stack trace:

Error: initialization of ArcLayer({id: 'arcs'}): Model needs a program
    at assert (VM561 app.js:37977:11)
    at Model._checkProgram (VM561 app.js:26560:59)
    at Model.initialize (VM561 app.js:26228:10)
    at new Model (VM561 app.js:26188:10)
    at ArcLayer._getModel (VM561 app.js:17202:19)
    at ArcLayer.updateState (VM561 app.js:17168:31)
    at ArcLayer._updateState (VM561 app.js:6397:14)
    at ArcLayer._initialize (VM561 app.js:6369:10)
    at LayerManager._initializeLayer (VM561 app.js:5593:13)
    at LayerManager._updateSublayersRecursively (VM561 app.js:5562:16)

Expected Result

Should render the layers without crashing.

Reproduce Steps

Example project to reproduce the error (I just changed the deck.gl's webpack 4 pure-js example so that it uses webpack 5):
github.com/ilyabo/deckgl-webpack5-example

git clone git@github.com:ilyabo/deckgl-webpack5-example.git
cd deckgl-webpack5-example
yarn
yarn start

To Do List

• Add label and assign to milestone
• Coding
• Test

[ibgreen]

@ilyabo An instanceof failure is typically an indication that you have multiple copies of certain modules (causing you to have multiple, subtly different defintions of the same class). Nothing good can come from that. Usually clearing up the lock file fixes it.

[ilyabo]

@ilyabo An instanceof failure is typically an indication that you have multiple copies of certain modules (causing you to have multiple, subtly different defintions of the same class). Nothing good can come from that. Usually clearing up the lock file fixes it.

@ibgreen Yes, it's the first thing I checked, but it doesn't seem to be the case here. The error remains after a clean install (and after removing yarn.lock). yarn why shows a single version of @luma.gl/core and /engine:

It's interesting, however, that the instanceof check succeeds on the first render and fails on the second. Why could that be the case?

[AlanMcCann]

I'm experiencing the same problem and can confirm all of the above issues independently. I'm glad to help with trying potential solutions.

[fy2462]

The same issue to me, All work well when using webpack-dev, but failed in production mode.

[fy2462]

I have fixed the issue by adding '@luma.gl/core': path.resolve(__dirname, 'node_modules/@luma.gl/core') to resolve.alias in webpack_config. specify the package for deck.gl when building. you can try it again. @AlanMcCann @ilyabo

[ilyabo]

Thanks @fy2462! Could you share a complete example? I tried adding this to my demo app and it didn't help :(
BTW, I experience it in dev mode too.

Update: Also tried in this deck.gl example app. This doesn't help: