keystone.guru
keystone.guru copied to clipboard
Migrate from Laravel Mix to Vite
This pull request includes changes for migrating from Laravel Mix to Vite outlined in Migration Guide and automated by the Vite Converter.
Before merging, you need to:
- Checkout the
shift-110982
branch - Run
composer update
- Run
npm install
- Review all comments for additional changes
- Thoroughly test your application (no tests?, no CI?)
Please send your feedback to [email protected] or share the good vibes on Twitter.
:information_source: Previously, Laravel configured several npm scripts for building assets. For Vite, Laravel configures a dev
script for generating and watching your assets (for development) and build
script for generating your assets (for production).
Shift automated this change by replacing commands using these scripts with their new Vite script. However, you may still be referencing these scripts in your code or in deployment scripts.
:information_source: Laravel renamed the environment variables used by Mix to use a VITE_
prefix, instead of MIX_
. While Shift automated this change throughout your code, you should check for any additional references which may not be included in your Git repository.
:warning: Shift found files which appeared to contain JSX but had a .js
file extension. Vite requires these files to have a .jsx
file extension.
While Shift automated this change, you may have additional files which contain JSX or may need to update any imports explicitly referencing the old .js
file extension.
:warning: Shift detected you may be using the tilde (~
) prefix to import CSS or JavaScript. You may try to add an alias for the ~
to your Vite configuration. Alternatively, you may update these imports to use an absolute reference or @
alias.
:information_source: The new @vite
Blade directive outputs <script>
tags with the type="module"
attribute. This attribute implicitly defers the script. This is a difference from Laravel Mix which may change the execution order of the JavaScript on your page.
If you experience JavaScript errors relating to undefined references, you may need to reorder your scripts or add the defer
attribute to any inline <script>
blocks on your page.
:alembic: This Shift is still being refined. Please report any issues or suggestions to [email protected]. Your feedback is what helps improve the experience for everyone.