Level 102
Can you please format the code :)
Are you using vite or laravel mix ?
Sep 27, 2022
19
Level 1
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) }, })
Level 1
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)
},
})
Level 102
@oncebar You need to set up the file as explained here when using vite
https://laravel.com/docs/9.x/vite#inertia
Just replace .vue with .jsx
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx')
),
Also rename your app.js file to app.jsx https://laravel.com/docs/9.x/vite#react
Level 1
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
Level 102
Level 1
@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>
Level 102
@oncebar And your app.jsx ?
Level 1
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)
},
})
Level 102
@oncebar You are missing this
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'
Level 1
@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
Level 102
@oncebar As far as I know inetia does not use ReactDOM anywhere. Do you use it in your own code?
Level 1
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)
},
})
Level 102
@oncebar That looks correct. But what about the page you are calling when you get the error? What is its name, and code?
Level 1
Welcome.jsx
import React, { useState } from "react";
const Welcome = () => {
const [name, setText] = useState('Ali');
return (
<h1>Welcome {name} .</h1>
)
}
export default Welcome
Level 102
@oncebar Maybe try npm update in case you have some old dependencies installed. Inertia claims to work with react 18: https://github.com/inertiajs/inertia/blob/master/packages/inertia-react/package.json#L39
Haven't upgraded myself yet, so I cannot guarantee it of course
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
},
})
Level 1
now it works, thank you so much.👍🙏🙏
Level 102
@oncebar Happy to help. Please mark a best answer to set the thread as solved :)
Level 1
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.