Build failures with Webpack 5

[CynicalBusiness]

It looks like Webpack 5 introduced a breaking change to some module resolution, and now react-babylonjs cannot be bundled into my app without disabling fully specified module paths in their entirety.

Using:

• webpack@5.34.0
• @babylonjs/core@4.2.0
• react-babylonjs@3.0.17

Tested this happens with node@12.14.0 and node@14.16.1.

My console gets flooded with the following error:

Module not found: Error: Can't resolve '@babylonjs/core/Materials/Textures' in '<project>\node_modules\react-babylonjs\dist'
Did you mean 'index.js'?
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

The path in question is different with each entry; the entry appears to repeat for every single module within BabylonJS.

It can be worked around by disabling fully-specified modules, as found in webpack's docs.

This sounds like a potential nightmare to fix just to appease Webpack if that's all it is, so I can understand if the "solution" to this is simply to disable that feature of Webpack. However, I'm not sure if this is Webpack in particular or something new with ESModules in general (I swear the standard changes faster than I can read up on it).

[brianzinn]

Thank-you for the explanation and the webpack references. I will look today for the solution.

[brianzinn]

@CynicalBusiness can you see if it's fixed for you 3.0.19?

[CynicalBusiness]

@brianzinn Apologies for the late response, but it does indeed appear to be working in 3.0.19 :tada:

Thanks for the quick fix.