Warning during webpack compilation of ES6 modules

I am using the version 1.63 - ES6 modules with an Angular CLI project.

Angular CLI uses webpack under the hood for compilation purposes.

When the Angular CLI builds the project, it emits the following warnings but the application works as expected:

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 47:110-117
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 69:31-38
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/cesium/Source/Core/buildModuleUrl.js 91:107-114
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Here is a snippet from my source code that depicts how I import Cesium into my application:

import { Viewer } from 'cesium';

const viewer = new Viewer(container);

[bluehaoran]

Respectfully, can I ask that this ticket be re-opened?

I did a little digging into Webpack to figure out why this error was happening. I believe either of the two solutions above (using unknownContextCritical + unknownContextRegExp OR using the ContextReplacement webpack plugin) masks the actual reason for the warning.

Webpack bundles libraries together. To do this efficiently and only include what is needed, it traces a dependency graph of the libraries that are imported or required.

The example that often pops up is: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/GoogleEarthEnterpriseMetadata.js#L487

            var url = buildModuleUrl('ThirdParty/google-earth-dbroot-parser.js');
            var oldValue = window.cesiumGoogleEarthDbRootParser;
            dbrootParserPromise = loadAndExecuteScript(url)

As I understand it, what these lines are doing is dynamically resolving the URL for the google-earth-dbroot-parser.js code, and then dynamically loading it via Head etc.

So to fix this for Webpack (and ruin it for the web) you could replace the first and third line with a require('./ThirdParty/google-earth-dbroot-parser.js');

This would allow Webpack to properly decide whether the dependent library needs to be loaded or not.

I imagine you could use Pragmas to specify when to use the current code instead of a require().

[Etheryte]

@bluehaoran’s comment is spot on. There is no reason why a Javascript library should reimplement modules in a proprietary way. The right approach is to fix the underlying issue and move everything over to require. This would eliminate a considerable amount of unnecessary complexity both from the codebase itself as well as from all setup configurations on the consumer side.

There’s currently only 33 matches for buildModuleUrl in the codebase so by any stretch this wouldn’t be a big refactor.