bug: Liquid as external dependency stopped working with version 4.6.0 and above about liquid HOT 4 CLOSED

Hey @vvision 👋

Good news. It's not a bug. It's a feature.

First of all, Liquid should not be external: You want to include the component code in your bundle. => You should remove the external config option.

Now, with Liquid 4.6.0, lots of chunks, which are actually never loaded in the browser, end up in your dist folder. So, why is the tree-shaking not working? Well, it kind of is working, because Rollup figures that all chunks are needed eventually, and the chunks are loaded in the browser only when needed. So why does Rollup "assume" that all chunks are needed? This is related to the includeDefineCustomElements option of the react output target!

Since liquid v4.6.0 the includeDefineCustomElements option set to true. With the includeDefineCustomElements option set to true, you don't need to define the custom elements from liquid react yourself. The custom elements get registered with the Custom Elements Registry as soon as imported. We didn't see this as a breaking change, because calling the defineCustomElements helper method manually would not break anything, even if the elements were already defined.

However things get tricky, when bundling liquid components into another library:
With the includeDefineCustomElements option set to true, the react.js and vue.js files within liquid import the defineCustomElements helper and execute it. The defineCustomElements helper imports the bootstrapLazy helper which in turn includes dynamic import statements for all components. Now, a bundler cannot know, which component will be lazy loaded eventually, so it includes all components as chunks into the bundle. The app that consumes the library can load only what's needed, but the bundle is still unnecessary big, including all Liquid components, even if not used.

In order to solve this issue, we have added additional entry points to the output targets, which do not include the defineCustomElements helper utility. This allows you to manually register custom elements on a as-needed basis, and fixes issues with the bundling, because dynamic imports are not used in the code. How to use this new feature is documented under Manually defining custom elements.

TLDR:
import { LdButton, LdTypo } from '@emdgroup-liquid/liquid/dist/react-define-excluded'

Please note that the feature is available in the newest version of Liquid. There is a major version bump which you need to take care of, but it should be really straight forward, as the breaking change in v5 is only relevant for a very special use case of liquid.

Let me know if something is still not working for you. 🤓

from liquid.

🎉 This issue has been resolved in version 5.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

📦🚀

from liquid.

Hey @borisdiakur 👋,

Thanks for all the explanations and the great work.
I've implemented the proposed solution and it works flawlessly !

Many thanks from our team.

from liquid.

@vvision Thanks for submitting this issue and putting so much effort in it. 🙏
I'm looking into it. It's a tricky one. 😬

from liquid.