DEV Community

Hernán Arica
Hernán Arica

Posted on

Cómo configurar React + Typescript en una aplicación laravel con inertia

  1. Instalar dependencias de ts.
  2. Crear archivo tsconfig.json y su configuración.
  3. Crear el archivo de definición para vite/client.
  4. Importante!

Lo primero

Doy por sentado que ya tenés configurado inertia con react para un proyecto laravel.

Instalar dependencias de ts

npm install -D typescript @types/react @types/react-dom

Si estas usando docker, recordá anteponer el "sail"

Crear tsconfig.json

touch tsconfig.json
En esta parte la configuración es más a gusto, peor te paso la mía

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowImportingTsExtensions": true,
    "paths": {
      "@/*": ["./resources/js/*"]
    }
  },
  "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts", "vite.config.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

Crear el archivo de definición

cd ./recources/js
echo "/// <reference types="vite/client" />" > vite-env.d.ts
Enter fullscreen mode Exit fullscreen mode

Al momento de crearlo también hay que agregarle el comentario especial

Importante

Al hacer un npm run build, tenés que importar el build con un type=module, ejemplo:
<script type="module" src="{{ asset("build/assets/app-tX21Cx8Q.js") }}"></script>

Sin nada más que decir, espero que les sea de ayuda esta guía.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay