.js extension in Inertia (not supported)?

I want to use ".js" instead of ".jsx", does inertia support this type of extension or only ".jsx"?

"@inertiajs/react": "^1.0.9", "react": "^18.2.0",

app.js

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.js`, import.meta.glob('./pages/**/*.js')),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

vite.config.js

import * as path from 'path';
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        react(),
    ],
    resolve: {
        alias: {
            '@theme': path.resolve(__dirname, './resources/theme'),
            '@components': path.resolve(__dirname, './resources/js/components')
        }
    },
    esbuild: {
        loader: 'jsx',
        include: /src\/.*\.jsx?$/,
        exclude: [],
    },
    optimizeDeps: {
        esbuildOptions: {
            plugins: [
                {
                    name: 'load-js-files-as-jsx',
                    setup(build) {
                        build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
                            loader: 'jsx',
                            contents: await fs.readFile(args.path, 'utf8'),
                        }));
                    },
                },
            ],
        },
    },
});

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- Scripts -->
    @routes
    @viteReactRefresh
    @vite(['resources/js/app.js', "resources/js/pages/{$page['component']}.js"])
    @inertiaHead
</head>

<body>
    @inertia
</body>

</html>

error upon build

Unexpected token
file: C:\laragon\www\siams\resources\js\app.js:13:20
11:         const root = createRoot(el);
12:
13:         root.render(<App {...props} />);
                        ^
14:     },
15:     progress: {
error during build:
RollupError: Unexpected token

mrbegginerak

2 years ago

Level 1

you have used in vite.config.js :

contents: await fs.readFile(args.path, 'utf8'),

but you did not imported it

import fs from 'fs/promises';

Please or to participate in this conversation.