webpack build includes node polyfills

[puckey]

Analyzing my radio garden webpack build, I noticed that the build includes polyfills for several node.js libraries – over 100kb minified which isn't left out of the browser build.

The reason for this is the libraries being required in loadWithHttpRequest inside Resource.js.

(For my build, I followed the webpack tutorial at https://cesiumjs.org/tutorials/cesium-and-webpack/)

[hpinkos]

Thanks @puckey

@ggetz @mramato do you have any ideas on this?

[mramato]

Related to #6671

[ggetz]

@puckey As for the polyfills, you can exclude them from your webpack build, see https://webpack.js.org/configuration/node/.

I've write up an issue to include that in the suggested webpack config/tutorial, see CesiumGS/cesium-webpack-example#8

[puckey]

Setting node: false stops webpack from including the polyfills in the build, but it still wants them because they are being required in the code – causing the following build errors:

ERROR in ./lib/cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'http' in '/client/lib/cesium/Source/Core'
 @ ./lib/cesium/Source/Core/Resource.js 1776:62-77
 @ ./lib/cesium/Source/Core/Iau2006XysData.js
 @ ./lib/cesium/Source/Core/Transforms.js
 @ ./lib/cesium/Source/Scene/SceneTransforms.js
 @ ./lib/cesium/viewer.js
 @ ./models/place.js
 @ ./models/index.js
 @ ./store/index.js
 @ ./index.js
 @ ./polyfill.js

ERROR in ./lib/cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'https' in '/client/lib/cesium/Source/Core'
 @ ./lib/cesium/Source/Core/Resource.js 1776:43-59
 @ ./lib/cesium/Source/Core/Iau2006XysData.js
 @ ./lib/cesium/Source/Core/Transforms.js
 @ ./lib/cesium/Source/Scene/SceneTransforms.js
 @ ./lib/cesium/viewer.js
 @ ./models/place.js
 @ ./models/index.js
 @ ./store/index.js
 @ ./index.js
 @ ./polyfill.js

ERROR in ./lib/cesium/Source/Core/Resource.js
Module not found: Error: Can't resolve 'zlib' in '/client/lib/cesium/Source/Core'
 @ ./lib/cesium/Source/Core/Resource.js 1778:15-30
 @ ./lib/cesium/Source/Core/Iau2006XysData.js
 @ ./lib/cesium/Source/Core/Transforms.js
 @ ./lib/cesium/Source/Scene/SceneTransforms.js
 @ ./lib/cesium/viewer.js
 @ ./models/place.js
 @ ./models/index.js
 @ ./store/index.js
 @ ./index.js
 @ ./polyfill.js

[puckey]

I noticed that without setting node: false in the webpack config, requiring Cesium's Buffer.js will cause the buffer package to be included – since Buffer is a global in node.. Another reason to exclude them as @ggetz suggested!

[ggetz]

Try node: 'empty', it'll provide an empty object so the require error won't be thrown.

[puckey]

That gives the following:

$ node_modules/.bin/webpack --config webpack.config.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].node should be one of these:
   false | object { Buffer?, __dirname?, __filename?, console?, global?, process?, ... }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration[0].node should be false
    * configuration[0].node should be an object.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ggetz]

It looks like you can provide an object and specify a value per node library: https://webpack.js.org/configuration/node/#other-node-core-libraries

We should specify 'empty' for the node libraries we are referencing.

I'm going to close this issue in favor of CesiumGS/cesium-webpack-example#8. If we want to continue to troubleshoot, we should move discussion to the forum or that issue. Thanks!

[matthias-ccri]

Maybe cesium can leverage the new browser field in package.json?

[matthias-ccri]

keyword: node builtins