Cyclic dependency error when using "polymerx watch" in a legacy "polymer serve" project

[TimPietrusky]

I want to move away from polymer serve because I need something that can build and bundle everything on the fly and that is just not possible with polymer serve. So I was trying to use polymerx (which is SUPER awesome, thank you!!!) and ran into a problem after doing these steps:

• Created my new project polymerx create default luminave
• Copied src from the legacy project to the new created one (without index.html)
• Migrated the changes in index.html manually
• Executed npm run dev and got this error:

/usr/local/lib/node_modules/polymerx-cli/node_modules/toposort/index.js:35
      throw new Error('Cyclic dependency' + nodeRep)
      ^

Error: Cyclic dependency

This was killing the process and giving me nothing to work with. So I had to create polymerx.config.js, added it to the dev command polymerx watch -c polymerx.config.js with this content:

export default function (config, env, helpers) {
  let { plugin } = helpers.getPluginsByName(config, "HtmlWebpackPlugin")[0];
  plugin.options.chunksSortMode = 'none'
}

This makes sure to disable the chunksSortMode by toposort which is used by the HtmlWebpackPlugin. After this I saw many errors in the console with dependencies that were shit and I could fix all of them.

Now my project is running with polymerx (YAAAAAAAY).

I think it would be nice to mention this somewhere, if someone might want to migrate a "legacy" (a project build on the https://github.com/Polymer/pwa-starter-kit + polymer serve) to use with PolymerX CLI.

[LasaleFamine]

Hi @TimPietrusky I'm really glad the CLI is helping you moving forward!

Your detailed explain is really helpful. I'm wondering if I can fix this problem with some sort of check. Can you help me figuring out what's the cause of this problem in a legacy project? Also for mentioning some resources within the README if I can't find a better solution.

Thank you so much anyway 👍

[TimPietrusky]

@LasaleFamine

Can you help me figuring out what's the cause of this problem in a legacy project?

My original goal was to be as standard compliant as possible, meaning having no build tools and only imports of absolute paths. I ported a lot of modules into ES6, but at some point this was not working anymore. So I had to switch to polymer serve (also because Polymer said that absolute paths are now a no go and we should be compliant with many developers so use relative paths and node module resolution). But I still could use all of my previous imports:

import module from '/src/components/module.js'

And I could use modules, that were not possible to convert, because they didn't provide a default / named export like this:

// my-global-module.js
export default globalModule = window.globalModule

// index.js
// Load the new module into something else
import globalModule from '/src/libs/globalModule.js'

Inside index.html I was loading these things into global scope.

BUT when switching to PolymerX CLI this was producing cyclic dependecy errors. So what I'm doing right now is to get rid of all the "ported" modules and import them for real from node_modules AND remove the src folder from every component that was absolutely imported.

Does this answer your question? If not then I will show you the PR with all the changes I have to do WHEN it's ready.

[TimPietrusky]

This problem is related to jantimon/html-webpack-plugin#870 and might be fixed in a newer version of html-webpack-plugin, but I'm not sure.

[TimPietrusky]

Anyway, you can find the changes that I had to do in order to resolve the problem. I also used the opportunity to delete stuff and move into a structure as you have defined it in the default skeleton. The important bits are the changes: NERDDISCO/luminave@934f177

[LasaleFamine]

Pretty detailed! Thank you so much for your time @TimPietrusky. After all I think the current solution here is, as you said, to mention the problem on the README in a section related to Switch from polymer-cli. I can't see any straightforward solution here for making that prop conditional.

What do you think? It's enough, currently, to add the details within the README?

EDIT: just opened a PR with that changes, take a look: https://github.com/PolymerX/polymerx-cli/pull/185/files

[TimPietrusky]

@LasaleFamine thank you super much for being that fast in solving this issue!