Ionic-framework: Remove Circular Dependencies

[alexweber]

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

[liamdebeasi]

Hi there,

Thanks for the issue. Can you provide a little more info? Are you using Ionic React, or something else? Additionally, are you creating an Ionic app or are you just using an Ionic component?

Thanks!

[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]

I'm also having this problem, and suspect anyone looking to integrate into an existing non create-react-app application will run into it.

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

[liamdebeasi]

Hi everyone,

Is this issue still reproducible with Ionic React 4.11.1?

[elylucas]

Closing this issue as its old on a pre-beta version of Ionic/React. If the problem still persists on the latest version, please create a new issue and link this one for reference.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.