Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

oncebar's avatar

Uncaught SyntaxError: Unexpected token '<' (at app.js:12:12)

Hi devlopers👋 i'am trying to setup inertia.js in laravel-react-vite app but the app showing blank page after deployment and the console showing below error message.

Uncaught SyntaxError: Unexpected token '<' (at app.js:12:12)

my app.js file

import React from 'react'

import { render } from 'react-dom'

import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({ resolve: name => require(./Pages/${name}), setup({ el, App, props }) { render(<App {...props} />,el) }, })

0 likes
19 replies
oncebar's avatar

i'm using laravel and react with vite

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />,el)
  },
})
oncebar's avatar

i changed app.js to app.jsx, now the console message is

app.jsx:6 Uncaught (in promise) ReferenceError: require is not defined
    at resolve (app.jsx:6:20)
    at d2 (createInertiaApp.js:8:52)
    at exports.createInertiaApp (createInertiaApp.js:12:26)
    at app.jsx:5:1
Sinnbeck's avatar

@oncebar And you changed the other things as well? Change it to .jsx in both the vite config and in @vite() in your blade file

plugins: [
        laravel({input: ['resources/js/app.jsx']}),
        react(),
    ],

and

@viteReactRefresh
@vite('resources/js/app.jsx')
oncebar's avatar

@Sinnbeck my vite.config.js file

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

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
    ],
});

my app.blade.php file

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        
        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])

        @inertiaHead
        
    </head>
    <body>
        
        @inertia

    </body>
</html>
oncebar's avatar

@Sinnbeck

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),
  // resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />,el)
  },
})
Sinnbeck's avatar

@oncebar You are missing this

import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'
oncebar's avatar

@Sinnbeck Now it works fine, but I get this error in console

react_devtools_backend.js:4026 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
Sinnbeck's avatar

@oncebar As far as I know inetia does not use ReactDOM anywhere. Do you use it in your own code?

oncebar's avatar

this is my app.jsx file

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'



createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        render(<App {...props} />,el)
    },
})
Sinnbeck's avatar

@oncebar That looks correct. But what about the page you are calling when you get the error? What is its name, and code?

oncebar's avatar

Welcome.jsx

import React, { useState } from "react";

const Welcome = () => {

    const [name, setText] = useState('Ali');

    return (
        <h1>Welcome {name} .</h1>
    )
}

export default Welcome
Sinnbeck's avatar
Sinnbeck
3 years ago
Best Answer
Level 102

Ok gave react 18 a shot. Its easy to fix

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

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />) //and here
    },
})
oncebar's avatar

now it works, thank you so much.👍🙏🙏

Sinnbeck's avatar

@oncebar Happy to help. Please mark a best answer to set the thread as solved :)

peeknot's avatar

Hi, I did caught this error again but now I am using ".js" instead of ".jsx"

This is app.js setup

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 file

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'),
                        }));
                    },
                },
            ],
        },
    },
});

react : ^18.2.0 vite: ^4.0.0 inertia: ^1.0.9

This is the error

Unexpected token
file: C:\laragon\www\siams\resources\js\app.js:12:30
10:     resolve: (name) => resolvePageComponent(`./pages/${name}.js`, import.meta.glob('./pages/**/*.js')),
11:     setup({ el, App, props }) {
12:         createRoot(el).render(<App {...props} />) //and here
                                  ^
13:     },
14:     progress: {

Please or to participate in this conversation.