NPM Packages in Experience Builder 1.8

esride-nik — Fri, 10 Jun 2022 15:05:57 GMT

While upgrading some NPM packages in ExB 1.8 Widgets, I stumbled across the problem that webpack 5 no longer includes polyfills for node core modules. This manifests in the error message "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default", meaning:
Packages that use node.js core modules no longer work natively with webpack 5.

Looking for an explanation, the following seemed plausible: "Webpack 4 automatically polyfilled many node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using. So Webpack 5 removed this functionality." (source)

There are many descriptions for the workaround, directly in the error messages in the console and also under the above mentioned source: The required sources have to be entered in webpack.config under resolve.fallback and installed via 'npm i'.

So far so good. Except that this configuration has been chopped up in ExB and spread over several files:

From left to right:

webpack.config.js in the "client" root folder referencing webpack-extensions.config.js in the "webpack" subfolder.
webpack-extensions.config.js builds the config from references to webpack-extensions.common.js
in webpack-extensions.common.js the resolve object occurs in 3 places, namely in getTemplatesWebpackConfig(), getWidgetsWebpackConfig() and getThemesWebpackConfig(). Here the property fallback is entered, whose contents (analogous to the other props) are entered in webpack.common.js.
finally in webpack.common.js the references to the polyfilled packages are under exports.fallback.

That works.

The trouble is, that the webpack files on root level of the "client" folder are not in my "exb-web-extension-repo", but are delivered with the ExB. Now if you use NPM packages in your custom widgets that require polyfills, you have to get to the webpack configs, but they are not in the repo. -_-

My solution: In my repository I created a subfolder called "_webpack5-config-updates", which contained the original supplied configs as the first commit. In the second commit are then my additions, so that one can also still understand, what has changed.

This becomes important when you include several repos, each of which needs its own polyfills. Because then you have to look at the configs manually and add all needed polyfills to the webpack-configs in the "client"-folder.
This is exactly the reason why the solution is not 100% cool.

Who has ideas here - please feel free to report and discuss!

@Junshan_Liu @Jianxia @DavidMartinez

Re: NPM Packages in Experience Builder 1.8

NiklasKöhn — Wed, 15 Jun 2022 09:45:07 GMT

You might use this to add all of them: https://www.npmjs.com/package/node-polyfill-webpack-plugin
Who wants to try?

topic Re: NPM Packages in Experience Builder 1.8 in ArcGIS Experience Builder Questions

NPM Packages in Experience Builder 1.8

Re: NPM Packages in Experience Builder 1.8