Remove Circular Dependencies

Bug Report

Ionic version: [x] 4.x

Current behavior: Compiling with Webpack still fails on latest versions of everything from a fresh install today. Doing as little as importing components breaks it.

Expected behavior: Webpack should be able to compile this either with updates to this package or maybe via a plugin or something…

Steps to reproduce: See related issues: #17456, #13797

Related code: See related issues: #17456, #13797

Other information:

Error: Cyclic dependency
    at visit (/path/to/node_modules/toposort/index.js:35:13)
    at visit (/path/to/node_modules/toposort/index.js:53:9)
    at visit (/path/to/node_modules/toposort/index.js:53:9)
    at Function.toposort [as array] (/path/to/node_modules/toposort/index.js:22:22)
    at Object.module.exports.dependency (/path/to/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/path/to/node_modules/html-webpack-plugin/index.js:364:35)
    at /path/to/node_modules/html-webpack-plugin/index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at Compiler.emitAssets (/path/to/node_modules/webpack/lib/Compiler.js:441:19)
    at onCompiled (/path/to/node_modules/webpack/lib/Watching.js:50:19)
    at hooks.afterCompile.callAsync.err (/path/to/node_modules/webpack/lib/Compiler.js:631:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at compilation.seal.err (/path/to/node_modules/webpack/lib/Compiler.js:628:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/path/to/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (/path/to/node_modules/webpack/lib/Compilation.js:1329:35)

Ionic info: Not using the Ionic CLI…

[alexweber]

Hi @liamdebeasi , I was essentially just re-opening the last issue (#17456) that got closed due to inactivity but is still ocurring. I’m using ionic react 0.05 and trying to mimic the conference app setup on a minimal custom webpack + babel build environment. The components won’t even import…

It it works with create react app which is essentially the same thing with more stuff then I might be missing something with my custom build, I’ll spin it up with CRA and see what the differences are ocne it’s ejected…

[kobyl]

@alexweber - There’s a day I’m not getting back… 😦

This is caused by HtmlWebpackPlugin. As we noted this works with react-scripts, but as it turns out this was a problem at one point. https://github.com/facebook/create-react-app/issues/4667

The bug was closed without a final solution, but the workaround posted worked for me. You just need to tell the thing not to sort.

    new HtmlWebpackPlugin({
...
      chunksSortMode: 'none'

And voila.