Cannot build!

[qedric]

Hi there, I have a problem where I cannot build, I've tried various things but really at a loose end - how do I get around this issue? Any help would be much appreciated!

ERROR in SplitChunksPlugin
Cache group "default" conflicts with existing chunk.
Both have the same name "layout.theme" and existing chunk is not a parent of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via dependsOn).
HINT: You can omit "name" to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group's 'test' instead. If you need modules to be evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of more info.

webpack 5.28.0 compiled with 1 error in 45086 ms
C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules\@hayes0724\shopify-packer\cli\commands\build.js:42
    if (stats.compilation.errors.length) throw Error('Compile errors');

[qedric]

The only way I can get it to build is if I change the name of either layout/theme.liquid or /scripts/layout/theme.js - which of course breaks the bundles.

[qedric]

It seems if I am importing the same module in two different files, then this issue occurs - how do I get around this? Of course there are scenarios where multiple js files need to use the same imports!

[qedric]

For example, in /scripts/layout/themes.js I have the following import:

import formatMoney from '../modules/format-money';

I have multiple product tempates; in each of them I make the following import to load the core product js:

import Product from '../modules/product-template';

in product-template I also have the same import as in theme - if I remove either one, I can build... but I need them both!

[hayes0724]

@qedric

It seems if I am importing the same module in two different files, then this issue occurs - how do I get around this? Of course there are scenarios where multiple js files need to use the same imports!

It's a webpack 5 optimization issue

You can share files on template entrypoints, this error only appears if you to try to share on layout and template entrypoint like your above example with layout.theme.js + template.product.js

The quick fix is this setting which disables shared bundles

module.exports = {
  'build.sharedBundles': false,
}

Optionally if you want to keep shared bundles you could add this function globally in layout and call it in templates:

layout.theme.js

import formatMoney from '../modules/format-money';
window.formatMoney = formatMoney() 

template.product.js

window.formatMoney()