How to Convert Laravel 12 React Starter Kit from Typescript to Javascript

Laravel's recently released React Starter Kit, bundled with Laravel 12, offers a fantastic foundation for building modern, dynamic web applications. It leverages the power of Inertia.js, React, and ShadCN – a winning combination for developers. However, the default setup employs TypeScript, a powerful but sometimes overly complex language for those preferring the straightforwardness of JavaScript. This guide will walk you through a seamless conversion process, transforming the starter kit into a lean, mean, JavaScript machine.

Why trade the type safety of TypeScript for the simplicity of JavaScript? It all boils down to personal preference and project needs. While TypeScript's robust type checking and advanced tooling are undeniable assets, they introduce a learning curve and can add overhead to smaller projects or those where strict type safety isn't critical. If your project prioritizes rapid development and ease of use, embracing plain JavaScript can significantly streamline your workflow. This isn't a condemnation of TypeScript; it's simply about choosing the right tool for the job.

Let's dive into the steps for converting Laravel's React Starter Kit from TypeScript to JavaScript. This transformation is surprisingly straightforward, requiring minimal effort to reap significant benefits.

Step 1: The Great File Conversion – From .tsx and .ts to .jsx and .js

We'll leverage the tsx-to-jsx-cli package to automate the bulk of the conversion. This handy tool meticulously transforms your TypeScript files (.tsx and .ts) into their JavaScript equivalents (.jsx and .js), saving you countless hours of manual editing.

First, navigate to your Laravel project directory using your terminal. Then, execute the following command:

      npx tsx-to-jsx-cli -s ./resources/js -d ./resources/js
    

This command instructs the tsx-to-jsx-cli to scan the ./resources/js directory (-s flag specifies the source directory), converting all .tsx and .ts files found within it, and placing the resulting .jsx and .js files in the same directory (-d flag specifies the destination directory). The npx command ensures you run the package without globally installing it, keeping your project clean.

Step 2: A Farewell to TypeScript Files

After the successful conversion, the original TypeScript files are no longer needed. Cleanly remove them to avoid confusion and potential conflicts. The following command uses find to locate and delete the obsolete files:

      find resources/js -type f \( -name "*.tsx" -o -name "*.ts" \) -delete
    

This command efficiently locates all files ending with .tsx or .ts within the resources/js directory (-type f specifies that we're looking for files, not directories), and removes them (-delete). The \( -name "*.tsx" -o -name "*.ts" \) part uses a conditional expression to ensure only files with these extensions are targeted.

Step 3: Configuration Tweaks – Adapting to a JavaScript World

With TypeScript gone, we need to adjust various configuration files to reflect this change. This involves removing references to TypeScript dependencies and updating file extensions to match our new JavaScript files.

First, let's modify the package.json file. Remove the following lines:

-        "typescript": "^5.7.2",
-        "@types/react": "^19.0.3",
-        "@types/react-dom": "^19.0.2",
-        "typescript-eslint": "^8.23.0"
    

These lines represent TypeScript-specific dependencies, no longer required in our JavaScript environment.

Next, we'll need to update the resources/views/app.blade.php file to point to the new .jsx files instead of the former .tsx files:

--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -14 +14 @@
 -        @vite(['resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
 +        @vite(['resources/js/app.jsx', "resources/js/pages/{$page['component']}.jsx"])
    

This subtle change ensures Vite correctly bundles and serves our JavaScript components. We're simply replacing the old file extensions with the new ones.

The vite.config.js file also needs a small adjustment:

--- a/vite.config.js
+++ b/vite.config.js
@@ -11 +11 @@ export default defineConfig({
-            input: ['resources/css/app.css', 'resources/js/app.tsx'],
+            input: ['resources/css/app.css', 'resources/js/app.jsx'],
    

Finally, adjust the eslint.config.js file. We’ll remove the TypeScript-specific ESLint plugins and configurations and add the following settings configuration for React:

import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';

export default [
    js.configs.recommended,
    {
        settings: {
            react: {
                version: 'detect',
            },
        },
        languageOptions: {
            globals: {
                ...globals.browser,
            },
        },
        rules: {
            'react/react-in-jsx-scope': 'off',
            'react/prop-types': 'off',
            'react/no-unescaped-entities': 'off',
        },
    },
    {
        plugins: {
            'react-hooks': reactHooks,
        },
        rules: {
            'react-hooks/rules-of-hooks': 'error',
            'react-hooks/exhaustive-deps': 'warn',
        },
    },
    {
        ignores: ['vendor', 'node_modules', 'public', 'bootstrap/ssr', 'tailwind.config.js'],
    },
    prettier, // Turn off all rules that might conflict with Prettier
];
    

This refined configuration ensures ESLint works seamlessly with our JavaScript codebase and the React framework. Remember to remove all TypeScript related import statements.

We also need to update the components.json file to disable the tsx option for component loading:

--- a/components.json
+++ b/components.json
@@ -5 +5 @@
 -    "tsx": true,
 +    "tsx": false,
    

This ensures that only JSX components are loaded.

Step 4: Dependency Installation and Verification

To ensure all dependencies are correctly installed and integrated, run the following commands:

npm install
npm run build
    

This installs all necessary JavaScript packages and compiles your application.

Step 5: The Moment of Truth – Testing Your Conversion

It's time to test the fruits of your labor. Start your Laravel application using:

      php artisan serve
    

Then, initiate the development server:

      npm run dev
    

Finally, run your tests to ensure everything functions as expected:

      php artisan test
    

If your application loads correctly in the browser and your tests pass, congratulations! You've successfully migrated Laravel's React Starter Kit to JavaScript.

Conclusion

Migrating from TypeScript to JavaScript in Laravel's React Starter Kit is surprisingly straightforward. By following these steps, you've effectively streamlined your development process, removing unnecessary complexity while retaining the core functionality and advantages of Laravel's powerful modern stack. Now you can focus on what truly matters: building amazing web applications.