UPGRADE LARAVEL 9.45 AND VITE

.env.example

@@ -48,5 +48,5 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

README.md

@@ -17,7 +17,6 @@ database use sqlite
 
 ```bash
 $ cp .env.example .env
-$ touch database/database.sqlite # if you use .env.example with default sqlite database
 $ composer install
 $ php artisan migrate
 $ php artisan serve

composer.json

@@ -8,7 +8,7 @@
         "php": "^7.3|^8.0",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
-        "inertiajs/inertia-laravel": "^0.5.4",
+        "inertiajs/inertia-laravel": "^0.6.4",
         "laravel/framework": "^9.0",
         "laravel/sanctum": "^2.6",
         "laravel/telescope": "^4.6",

package.json

@@ -1,13 +1,8 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@babel/preset-react": "^7.13.13",
@@ -16,15 +11,17 @@
         "@inertiajs/inertia-react": "^0.8.0",
         "@inertiajs/progress": "^0.2.7",
         "@tailwindcss/forms": "^0.3.2",
+        "@vitejs/plugin-react": "^3.0.0",
         "autoprefixer": "^10.2.4",
         "axios": "^0.21",
-        "laravel-mix": "^6.0.6",
+        "laravel-vite-plugin": "^0.7.3",
         "lodash": "^4.17.19",
         "postcss": "^8.2.13",
         "postcss-import": "^14.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "tailwindcss": "^2.1.2"
+        "tailwindcss": "^2.1.2",
+        "vite": "^4.0.3"
     },
     "dependencies": {
         "classnames": "^2.3.1",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/vendor/telescope/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=d3ff915bff3de87b87cc",
-    "/app-dark.css": "/app-dark.css?id=3ae28ef5f7b987d68dc6",
-    "/app.css": "/app.css?id=7c970f699ed9cf60d80b"
+    "/app.js": "/app.js?id=08317cb3c83c7035246fe3d474db3454",
+    "/app-dark.css": "/app-dark.css?id=3ae28ef5f7b987d68dc611118c646308",
+    "/app.css": "/app.css?id=7c970f699ed9cf60d80b273b4ad2ad61"
 }

resources/js/Pages/Category.jsx

@@ -147,7 +147,6 @@ export default function Category(props) {
                                   <span className="label-text">Amount</span>
                               </label>
                               <NumberFormat
-                                  thousandSeparator={true}
                                   className={`input input-bordered ${
                                       errors.amount ? 'input-error' : ''
                                   }`}

resources/js/Pages/Transaction.jsx

@@ -406,7 +406,6 @@ export default function Transaction(props) {
                         <span className="label-text">Amount</span>
                     </label>
                     <NumberFormat
-                        thousandSeparator={true}
                         className={`input input-bordered ${
                             errors.amount ? 'input-error' : ''
                         }`}

resources/js/app.js

@@ -1,19 +0,0 @@
-require('./bootstrap');
-
-import React from 'react';
-import { render } from 'react-dom';
-import { createInertiaApp } from '@inertiajs/inertia-react';
-import { InertiaProgress } from '@inertiajs/progress';
-import 'react-toastify/dist/ReactToastify.css';
-
-const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
-
-createInertiaApp({
-    title: (title) => `${title} - ${appName}`,
-    resolve: (name) => require(`./Pages/${name}`),
-    setup({ el, App, props }) {
-        return render(<App {...props} />, el);
-    },
-});
-
-InertiaProgress.init({ color: '#570df8' });

resources/js/app.jsx

@@ -0,0 +1,22 @@
+import "./bootstrap"
+import "../css/app.css"
+
+import React from "react";
+import { render } from "react-dom";
+import { createInertiaApp } from "@inertiajs/inertia-react";
+import { InertiaProgress } from "@inertiajs/progress";
+import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
+import "react-toastify/dist/ReactToastify.css";
+
+const appName =
+    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
+    setup({ el, App, props }) {
+        return render(<App {...props} />, el);
+    },
+});
+
+InertiaProgress.init({ color: "#570df8" });

resources/js/bootstrap.js

@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from "lodash";
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,9 +7,10 @@ window._ = require('lodash');
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from "axios";
+window.axios = axios;
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
@@ -18,11 +20,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
 // });

resources/views/app.blade.php

@@ -10,12 +10,10 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
         <!-- Scripts -->
         @routes
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @viteReactRefresh
+        @vite('resources/js/app.jsx')
     </head>
     <body class="font-sans antialiased">
         @inertia

tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
-        './resources/js/**/*.js',
+        './resources/js/**/*.jsx',
     ],
 
     theme: {

vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import laravel from "laravel-vite-plugin";
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [
+        laravel(["resources/css/app.css", "resources/js/app.jsx"]),
+        react(),
+    ],
+    resolve: {
+        alias: {
+            "@": "/resources/js",
+        },
+    },
+});

webpack.mix.js

@@ -1,27 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
-  |--------------------------------------------------------------------------
-  | Mix Asset Management
-  |--------------------------------------------------------------------------
-  |
-  | Mix provides a clean, fluent API for defining some Webpack build steps
-  | for your Laravel applications. By default, we are compiling the CSS
-  | file for the application as well as bundling up all the JS files.
-  |
- */
-
-mix
-  .js('resources/js/app.js', 'public/js')
-  .react()
-  .postCss('resources/css/app.css', 'public/css', [
-      require('postcss-import'),
-      require('tailwindcss'),
-      require('autoprefixer'),
-  ])
-  .webpackConfig(require('./webpack.config'))
-  .disableSuccessNotifications();
-
-if (mix.inProduction()) {
-  mix.version();
-}