How to install laravel-vite + react typescript ?

I'm currently setting up a project with laravel, vite, react, typescript. But when i ran npm run dev and php artisan serve

The page shows an error message : Configuration "resources/scripts/App.tsx" does not exist.

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import laravel from 'vite-plugin-laravel'
import react from "@vitejs/plugin-react";

export default defineConfig({
	plugins: [
		react(),
		laravel({
			postcss: [
				tailwindcss(),
				autoprefixer(),
			],
		}),
	],
})

package.json

 "devDependencies": {
        "@vitejs/plugin-react": "^2.0.0",
        "autoprefixer": "^10.4.8",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.7",
        "vite": "^3.0.4",
        "vite-plugin-laravel": "^0.2.0-beta.28"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.8.3",
        "@types/react": "^18.0.15",
        "@types/react-dom": "^18.0.6",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.3.0",
        "typescript": "^4.7.4"
    }

resources/views/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <title>Laravel</title>
        @viteReactRefresh
        @vite("resources/scripts/App.tsx");
    </head>
    <body class="antialiased">
        <div id="root"></div>
        <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
             Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
         </div>
    </body>
</html>

Folder structure

resources
- css
- scripts
- - App.tsx
- views
- - app.blade.php

frankielee

3 years ago

Level 29

@galih56

You are missing the input option in vite.config.js?

https://github.com/laravel/ui/blob/e9bf8218b4eb209c4cf3aac3d1b5801a14fe0a5c/src/Presets/react-stubs/vite.config.js

laravel({
  postcss: [tailwindcss(), autoprefixer()],
  input: ['resources/scripts/App.tsx'],
});

Paulo009

3 years ago

Level 5

Did you find the solution?

galih56

2 years ago

Best Answer

Level 1

Sorry for giving late response, i forgot i asked a question after a long time looking for answer.

I solved the issue with registering the file like this


export default defineConfig(({mode})=>{
    return {
        plugins: [
          laravel({
              input: [
                'resources/css/app.css',
                'resources/js/app.tsx'
              ],
              refresh: true,
          }),
          react(),
          EnvironmentPlugin('all')
        ],
    }
});

I forgot it is case sensitive

Please or to participate in this conversation.