question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning during webpack compilation of ES6 modules

See original GitHub issue

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);

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

6reactions
bluehaorancommented, Jan 2, 2020

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().

5reactions
Etherytecommented, Jun 28, 2020

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Module Methods - webpack
This section covers all methods available in code compiled with webpack. ... pick from a variety of module syntax styles including ES6, CommonJS,...
Read more >
Getting large cryptic errors and warnings when trying to use ...
Your webpack config that handles the server code should have a few extras to avoid issues. Try adding the following:
Read more >
How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >
How to Analyze Circular Dependencies in ES6? - Railsware
It is caused by circular dependencies that cannot be resolved synchronously by webpack. One is undefined, hence the error. Let me explain what ......
Read more >
JavaScript modules - MDN Web Docs
It has therefore made sense in recent years to start thinking about ... module systems like RequireJS, and more recently Webpack and Babel)....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found