Error: Not working with webpack 4 "SplitChunksPlugin" plugin

[Manisharote]

Arcgis-webpack-plugin not working with SplitChunksPlugin

Description

while using webPack 4 SplitChunksPlugin to pack common code from node_modules into one chunk specially arcgis-js-api code into "vendor.[chunkHash].js" and cache it on the client, the code compiles but the map never shows up and In developer tools console below error shows up Error: is Uncaught TypeError: Cannot read property 'registerAbsMids' of undefined at index.4530b1a0d640ff5c9bcd.js:2 at index.4530b1a0d640ff5c9bcd.js:13

When I open "ndex.4530b1a0d640ff5c9bcd.js" the error is at first line function(){ (this||window)["webpackJsonp"].registerAbsMids({

Expected Behavior

While using SplitChunksPlugin it should pack all the vendor code from node_module in one vendor chunk and all other source code into differnt chunks depending on the inputs provided in the webPack config file and map should show up in browser.

Actual Behavior

It compiles the code and pack it into one vendor chunk and other file correctly. But throws an error while running in browser.

Possible Fix

no clue why it is happening.

Steps to Reproduce

1. Install ArcGIS CLI npm install -g @arcgis/cli
2. Create a test project with ArcGIS CLI arcgis create testProject
3. Open webpack.config.js file from the above created project and add below configuration in under optimization part.
4. optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\/]node_modules[\/]/, name: "vendors", chunks: "all" } } }, runtimeChunk: { name: "manifest" },
5. And run npm start
6. if you want to analyse the chunk and code spliced by split chunk plugin use webpack-bundle-analyzer

Context

I am not able to use the SplitChunksPlugin plugin which is very use-full in splitting the code, caching the code on client and considerably reducing the size of the package.

Your Environment

• Webpack version: "4.20.1"
• @types/arcgis-js-api : "~4.11.0",
• @arcgis/webpack-plugin: "~4.12.1"
• browser name : Chrome 76.0.3809.132

[odoe]

It will work with async chunks, but not all, and no runtimeChunk. The current chunk is about 8MB, so not ideal.

I'll look at the plugins that we use to see if it's something in our base config or a core dependency.

[YangAi]

I'm having the same problem.

[odoe]

I have not found a way to get this to work with splitChunks option, so for the moment, it is unsupported.

[YangAi]

I added these in my webpack config. And it seems working now. optimization: { minimize: true, splitChunks: { minChunks: Infinity, chunks: 'all' } }