How to migrate from Webpack to Vite in Laravel, Inertiajs, React, and TypeScript.

Laravel has recently migrated from using Laravel Mix and Webpack to Vite for the compiling of frontend dependencies and assets. In this video, I will show you how to migrate an existing project from using Laravel Mix and Webpack to Vite. The project is an existing Laravel installation with Inertiajs, Reactjs, and Typescript.
Click here to subscribe
www.youtube.co...
I offer free code reviews as a way to give back and share my knowledge with the community. So, please feel free to reach out if interested. My contact details are available on the channel's about page or check out the links below: / codingwithpixelfix
Reddit
/ laravelcodereviews
Medium
/ codingwithpixelfix
Facebook
/ codingwithpixelfix
Twitter
/ pixelfixnetau
LinkedIn
/ codingwithpixelfix
Github
github.com/pix...
#laravel #laraveltips #webdevelopment

[@miscellaneousvideos306]

Thanks Buddy.. You saved me from headache I am facing from last 3 hours to run inertia with vite

[@CodingWithPixelFix]

You're welcome and I totally agree it can be a headache sometimes.

[@miscellaneousvideos306]

Inertia yet not updated its documentation for vite configuration. Its same showing for webpack and its generating confusion for many devs

[@charlesloehle7998]

Hi Pixel Fix, can you do a vid on deployment to digital ocean? Thanks for your help!

[@CodingWithPixelFix]

Thanks for the suggestion. I will put it on the list to do at some point. At the moment I will need to investigate how to perform a deployment to Digital Ocean, as I have not worked with Digital Ocean before.

[@charlesloehle7998]

@@CodingWithPixelFix I was having Mixed Content errors but I think i figured it out! I put a env var in digitalocean
APP_ENV = production
and in AppServiceProvider.php
public function boot()
{
if ($this->app->environment('production')) {
URL::forceScheme('https');
}
}
now it works. hope that helps someone else too.

[@djent_prog_core_guitarcovers]

This guide should basically work for Laravel, Inertia and React without TypeScript as well, right?

[@CodingWithPixelFix]

That is correct. You can basically ignore anything related to TypeScript and it will still work.

[@labyaj3471]

i need to up webpack to vite on laravel 8+ vue project bro please

[@CodingWithPixelFix]

Thank you for the suggestion. I will definitely put it on my list to do. At the moment Vue is very low on my list so I cannot promise this will be anytime soon, unfortunately.

[@charlesloehle7998]

my app.tsx file still shows a squiggly line under import.meta.glob and hovering over it says "The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'" so I initialized a tsconfig.json and updated it with "module": "esnext" but still has the error

[@CodingWithPixelFix]

I could not recreate the issue apart from removing the "module": "esnext", from the tsconfig.json file. If you have your project in a public repo, I will gladly look at your config files to see if I can find anything. Just email me the link to your repo.

[@charlesloehle7998]

@@CodingWithPixelFix Sent it!

[@mugen153]

@@charlesloehle7998 Same problem here. If you guys conclude any solution to that problem, please consider replying here so that others can see it. Thanks!

[@charlesloehle7998]

@@mugen153 try this: in your tsconfig.json file add 2 lines at the bottom
"moduleResolution": "node"
},
"include": ["resources/ts/**/*", "**/*.ts", "**/*.tsx"]
}
full tsconfig file:
{
"compilerOptions": {
"target": "ESNext",
"jsx": "react" /* Specify what JSX code is generated. */,
"module": "esnext" /* Specify what module code is generated. */,
"types": [
"vite/client"
] ,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"strict": true /* Enable all strict type-checking options. */,
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"moduleResolution": "node"
},
"include": ["resources/ts/**/*", "**/*.ts", "**/*.tsx"]
}

[@mugen153]

@@charlesloehle7998 You are actually a god. This worked man! I wanted to give up and continue in plain javascript, but you have saved me. Also, didn't know that tsconfig.json is used in place of jsconfig.json.