I’m learning how to use Laravel With React and recently finished a shopping list app.

It’s about as basic of an mysql CRUD (Create/Read/Update/Delete) app as one can get.

But I’m pretty proud of it. I learnt a lot, and I actually use it daily. You can sign up to see it here.

I also have a blog post on writing the app here.

Be warned that the blog post is a mess. I use it for documenting my work and really don’t expect anyone to actually read it.

This post is also about me documenting my work and sharing some mistakes that I’m sure to make.

It’s been about a month since I’ve been working on my app. And getting back to it reminds me how quickly one forgets software engineering.

Since I’m updating an existing app, I will make sure not to touch the app that running. Instead, I will use my local laptop to make the changes.

To do that, I use Visual Studio Code and Git.

First thing I will do is run the app locally to make sure it is still running.

To do that, using terminal I will change into the app’s directory and run the following.

npm run dev

php artisan serve

The server is now running at http://127.0.0.1:8000. It all looks good.

I’m going to create a new git branch.

git branch inertia_1_0

Then I’m going to switch to that branch from main.

git switch inertia_1_0

Now, I’m going to check that I’m in that branch.

git branch

There’s an asterisk next to inertia_1_0. I’m good to go.

The upgrade guide to Inertia 1.0 is here.

Start by removing all of the old Inertia libraries:

npm remove @inertiajs/inertia @inertiajs/inertia-react @inertiajs/progress @inertiajs/server

Next, install the new Inertia adapter of your choice.

npm install @inertiajs/react

Next, update all the Inertia related imports in your project to use the new adapter library name. This looks complicated and there’s no question that I’m going to miss some locations.

- import { Inertia } from '@inertiajs/inertia'
+ import { router } from '@inertiajs/react'

- import createServer from '@inertiajs/server'
+ import createServer from '@inertiajs/react/server'

- import { createInertiaApp } from '@inertiajs/inertia-react'
- import { App } from '@inertiajs/inertia-react'
- import { app } from '@inertiajs/inertia-react'
- import { InertiaApp } from '@inertiajs/inertia-react'
+ import { createInertiaApp } from '@inertiajs/react'

- import { usePage } from '@inertiajs/inertia-react'
+ import { usePage } from '@inertiajs/react'

- import { useForm } from '@inertiajs/inertia-react'
+ import { useForm } from '@inertiajs/react'

- import { useRemember } from '@inertiajs/inertia-react'
- import { useRememberedState } from '@inertiajs/inertia-react'
+ import { useRemember } from '@inertiajs/react'

- import { Head } from '@inertiajs/inertia-react'
- import { InertiaHead } from '@inertiajs/inertia-react'
+ import { Head } from '@inertiajs/react'

- import { Link } from '@inertiajs/inertia-react'
- import { link } from '@inertiajs/inertia-react'
- import { InertiaLink } from '@inertiajs/inertia-react'
+ import { Link } from '@inertiajs/react'

For my purposes, I think that’s all I need to do.

What are the odds, it’s going to work?

Before doing anything, I stopped the npm and artisan servers by pressing together the command and period buttons on a mac computer.

Now. I’m going to run:

npm remove @inertiajs/inertia @inertiajs/inertia-react @inertiajs/progress @inertiajs/server

When I did that, I got the following:

removed 19 packages, and audited 210 packages in 2s

31 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

Okay, not thrilled about that high security vulnerability but will go forward with:

npm install @inertiajs/react

Now I got:

Run `npm audit` for details.
davidklein@Davids-MacBook-Air react1-app % npm install @inertiajs/react

added 13 packages, and audited 223 packages in 5s

37 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

json5 2.0.0 - 2.2.1 Severity: high Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h fix available via npm audit fix node_modules/json5

1 high severity vulnerability

I reran `npm audit fix` and got:

changed 1 package, and audited 223 packages in 2s

37 packages are looking for funding run npm fund for details

found 0 vulnerabilities ```

All is good. Now, I have to change all the import statements.

Did that and . . .

Did not work.

Got a blank page.

Visit Emlekezik.com