cms
cms copied to clipboard
statamic
[5.x] Vite 5
Note: 5.x Branch Currently this PR points to 5.x, due to the master branch not being up to date with the 5.x branch, but I wanted to make sure, that it works with all the latest changes. Therefor this PR is also in Draft, that it is not accidentally merged.
Breaking Change This PR updates to Vite 5 and updates some dependencies accordingly. (Therefor being a breaking change in my opinion, but if you think this is not a breaking change, then you are free to merge this into 5.x).
Node.js v20 Vite 5 drops support for Node.js v16, which is currently being used in the release and test workflows. Node.js v18 will reach EOL at 30th April 2025, which is around the same time Statamic 6.x will probably be released. Therefor I opted for updating directly to Node.js v20 and accordingly updating NPM to v10. (See https://endoflife.date/nodejs and https://nodejs.org/en/about/previous-releases)
Laravel Vite Plugin v1 The Laravel Vite Plugin was also bumped to the stable release.
Node ES Modules (ESM) This is the standard which is used by Vite and Laravel. I am not sure what influence this could have on other packages, which may interact with the builds.
This changes module.exports to export default and also uses the import syntax instead of the require syntax.
Migrate to Vitest
Vitest is a new testing framework for Vite, which is also used in this PR.
Jest seems to have some problems with running esm modules, which is also why I opted for the mostly compatible Vitest (only needed the import of test, expect, afterEach and removing a globals definition).
I also check, using Jest there were 6 Test Suites with 65 Tests. Vitest has the same amount of Test Suites and Tests.
Due to the nature of the laravel-vite-plugin and running in CI, I also set LARAVEL_BYPASS_ENV_CHECK=1 while running the tests in CI.
(See https://github.com/laravel/vite-plugin/issues/164)
Manual Test
I ran npm run build and rpm run frontend-build in this repository.
Afterwards I also tried it with a fresh Statamic 5.x application and everything works as expected.
Known Problems
Currently there is the warning while running npm run build, which I am not sure how it should be handled.
[plugin:vite:resolve] [plugin vite:resolve] Module "os" has been externalized for browser compatibility, imported by "node_modules/uniqid/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
Side Note Vite 6 is already in the works and will probably be released this year. An update later this year to Vite 6 would also be viable if desired. See https://github.com/vitejs/vite/discussions/15886
Therefor this PR is also in Draft, that it is not accidentally merged.
We typically don't accidentally merge PRs, so please just mark it as ready if you consider it complete, then we will review it.
Breaking Change This PR updates to Vite 5 and updates some dependencies accordingly. (Therefor being a breaking change in my opinion, but if you think this is not a breaking change, then you are free to merge this into 5.x).
I don't think this is a breaking change. It's just internal tooling and tests. Nothing public facing as far as I can tell.
Hey @jasonvarga thanks for the Hint. I updated the PR title accordingly and rebased against 5.x, I will also mark the PR as ready for review.
FWIW, when a starter kit is relying on Vite 4.5, it is not trivial to migrate it to Vite 5. I would appreciate if some time could be allocated to update Statamic's starter kit to make them work nicely with Vite 5.
FWIW, when a starter kit is relying on Vite 4.5, it is not trivial to migrate it to Vite 5. I would appreciate if some time could be allocated to update Statamic's starter kit to make them work nicely with Vite 5.
If you're experiencing issues with any of our first-party starter kits, please open an issue on the relevant starter kit's repository and we can take a look at getting it upgraded.
This pull request is only related to upgrading the version of Vite that's used to build the Control Panel assets, unrelated to the version of Vite used by sites or starter kits.
Thank you for this PR but this will likely be covered in the Vue3 upgrade.