Vite as Volto bundler

[tisto]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder: Timo Stollenwerk (@tisto)

Abstract

Volto, as any other modern JS application, relies on a bundler for producing builds of the transpiled and transformed code for production deployments and support for a full fledged development environment.

Volto is using currently Razzle as a bundler, however it has become obsolete and completely abandoned in the last years. This situation created a huge technical debt in a key element of the product. Volto can’t use some of the latest tooling or development experience improvements that the React ecosystem has provided during the last years.

After a study of the alternatives in the React ecosystem, it’s been decided to use Vite. This bundler has become the standard “de facto” bundler of many modern JS frameworks and apps. It’s flexible, pluggable, extensible and fast. It does not use Webpack (since Webpack is becoming problematic lately), but ESbuild and Rollup for the production bundling.

Assumptions

Vite is ESM, so it’s also future ready. This, along with the fact that it does not uses Webpack forced us to take some decisions and push for some breaking changes. All of them have a good reason behind them and in summary, it will resut in better and modern code using ESM and React artifacts, instead of relying on Razzle and Webpack magic.

Breaking changes

• Config from project - create-addons-loader will no longer load the config from the project itself.
• lodash-es must be used instead of lodashbecause the latter is not compatible with ESM.
• @loadable/component and Volto’s Loadables support only works for Webpack based builds, so they will be replaced them with standard React lazy instances.
• The index.js barrel import files are removed for allowing the build to better chunk splitting thanks to the above.
• doesNotContainClick from semantic-ui-react will be adopted in now core
• Globals __CLIENT__ and __SERVER__ have to be replaced with import.meta.env.SSR

All of them will be deprecated in Volto 18 so their use is already discouraged from Volto 18 on.

Deliverables

Removal of all Razzle artifacts, Webpack plugins, unused Babel plugins and config. Removal of related libraries from the devDependencies.

Except for the above deprecations and breaking changes the code and libraries used in Volto should not be changed, defining a baseline in which base future improvements that will be taking place in other PRs.

The result must pass all the existing tests and be linted following the existing configuration.

Risks

The breaking changes introduced will force to run upgrade steps not only in the project's code, but also in add-ons. All Razzle artifacts will have to be removed or updated. Add-ons maintainers will have to release major versions of them, and maintain compatibility matrixes to communicate properly which versions are ready for the new Vite buids.

We need to write outstanding documentation in order to make the process the smoothest possible.

Proposal & Implementation

The current work is at 70% and done in this PR: https://github.com/plone/volto/pull/6050

Participants

Víctor Fernández de Alba (@sneridagh) Piero Nicolli (@pnicolli) Volto Team (@plone/volto-team)

[sneridagh]

Disclaimer

This is an strategic PR, so it's overseen, done and implemented by the Volto Team.

[davisagli]

@sneridagh We obviously don't have much choice about whether to switch to something else, and I'm grateful for the efforts to find a path forward.

It's unfortunate that the breaking changes will be enough to make it difficult to maintain an addon that supports both the old and new way. Can we do anything to help make this path smoother, like automatic fixers to take care of some of the changes?

Vite is ESM, so it’s also future ready.

I'm only vaguely aware of what ESM is. Can you say a bit more about what the consequences of this change are?

doesNotContainClick from semantic-ui-react will be adopted in now core

This one sounds more related to https://github.com/plone/volto/issues/6321 than to Vite.

Globals CLIENT and SERVER have to be replaced with import.meta.env.SSR

Is it possible to add a forward-compatible import.meta.env object in Volto 18 with Razzle, so that addons can make this change already?

[sneridagh]

@davisagli thanks for taking a look! For sure we have to develop further the PLIP text, I will complete it and improve it.

Regarding having an add-on that supports both: I still think that we could achieve that. Please take a look at: https://github.com/plone/volto/issues/6350

It's a summary of deprecations that we should issue in Volto 18. They are related with Plone 7 / Vite build. The idea is adding alternatives for each deprecation so the community can start being prepared for Plone 7.

I don't know if the import.meta is a ESM thing, so in a non-ESM build it will complain. We should investigate and find proper alternatives for all.