"route is not defined" from SSR server

[TiiFuchs]

I'm not quite sure where to put this.

I just verified that its not just my app.

I installed a fresh Laravel project with Laravel Breeze using Vue with Inertia, Inertia SSR and TypeScript.

Then I added a console.log(route('profile')) in my Welcome.vue files <script setup> section. compiled everything with npm run build, started the ssr server with php artisan inertia:start-ssr, disabled JavaScript in my browser and reload the page.

The result is always the same:

Starting SSR server on port 13714...
Inertia SSR server started.

[Vue warn]: Unhandled error during execution of setup function
  at <Welcome errors= {} auth= { user: null } ziggy= {
  url: 'http://ziggy-test.test',
  port: null,
  defaults: [],
  routes: {
    'sanctum.csrf-cookie': { uri: 'sanctum/csrf-cookie', methods: [Array] },
    dashboard: { uri: 'dashboard', methods: [Array] },
    'profile.edit': { uri: 'profile', methods: [Array] },
    'profile.update': { uri: 'profile', methods: [Array] },
    'profile.destroy': { uri: 'profile', methods: [Array] },
    register: { uri: 'register', methods: [Array] },
    login: { uri: 'login', methods: [Array] },
    'password.request': { uri: 'forgot-password', methods: [Array] },
    'password.email': { uri: 'forgot-password', methods: [Array] },
    'password.reset': {
      uri: 'reset-password/{token}',
      methods: [Array],
      parameters: [Array]
    },
    'password.store': { uri: 'reset-password', methods: [Array] },
    'verification.notice': { uri: 'verify-email', methods: [Array] },
    'verification.verify': {
      uri: 'verify-email/{id}/{hash}',
      methods: [Array],
      parameters: [Array]
    },
    'verification.send': { uri: 'email/verification-notification', methods: [Array] },
    'password.confirm': { uri: 'confirm-password', methods: [Array] },
    'password.update': { uri: 'password', methods: [Array] },
    logout: { uri: 'logout', methods: [Array] },
    'storage.local': {
      uri: 'storage/{path}',
      methods: [Array],
      wheres: [Object],
      parameters: [Array]
    }
  },
  location: 'http://ziggy-test.test'
}  ... >
  at <Inertia initialPage= {
  component: 'Welcome',
  props: {
    errors: {},
    auth: { user: null },
    ziggy: {
      url: 'http://ziggy-test.test',
      port: null,
      defaults: [],
      routes: [Object],
      location: 'http://ziggy-test.test'
    },
    canLogin: true,
    canRegister: true,
    laravelVersion: '11.26.0',
    phpVersion: '8.3.10'
  },
  url: '/',
  version: 'ef7dfac2be4457af7cedae810f854f68'
} initialComponent= {
  __name: 'Welcome',
  __ssrInlineRender: true,
  props: {
    canLogin: { type: [Function: Boolean] },
    canRegister: { type: [Function: Boolean] },
    laravelVersion: {},
    phpVersion: {}
  },
  setup: [Function (anonymous)],
  inheritAttrs: false
} resolveComponent=fn<r>  ... >
  at <App>
ReferenceError: route is not defined
    at setup (file:///Users/tii/projects/web/ziggy-test/bootstrap/ssr/assets/Welcome-BnVlHDQj.js:14:13)
    at _sfc_main.setup (file:///Users/tii/projects/web/ziggy-test/bootstrap/ssr/assets/Welcome-BnVlHDQj.js:87:23)
    at callWithErrorHandling (/Users/tii/projects/web/ziggy-test/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19)
    at setupStatefulComponent (/Users/tii/projects/web/ziggy-test/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7783:25)
    at setupComponent (/Users/tii/projects/web/ziggy-test/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7744:36)
    at renderComponentVNode (/Users/tii/projects/web/ziggy-test/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:645:15)
    at renderVNode (/Users/tii/projects/web/ziggy-test/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:779:14)
    at renderComponentSubTree (/Users/tii/projects/web/ziggy-test/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:730:7)
    at renderComponentVNode (/Users/tii/projects/web/ziggy-test/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:664:12)
    at renderVNode (/Users/tii/projects/web/ziggy-test/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:779:14)

It's always ReferenceError: route is not defined.

That's the problem I have in my application too. With JavaScript running from the browser: No problems at all. Everything works fine.
But without JavaScript, so it definitely comes from the SSR server: route is not defined.

I'm a litte overwhelmed with this... Someone any ideas?

[TiiFuchs]

I found a workaround by doing this in every component I need routes:

import {route as ziggyRoute} from "ziggy-js";
const route = inject<typeof ziggyRoute>("route")!;

[kresnasatya]

Hi, I have this problem too. I use Inertia Laravel + Inertia/Svelte. Here's the issue I create in my repository: senkulabs/breeze-lite#4. I don't setup any route in my Svelte components. I just use @route blade directive that I put in app.blade.php. That's it. I was thinking that this is more than enough. But, it turns out no.

[aeruggiero]

+1, same issue, but with Jetstream.

I will try the workaround, but I think it's a bug. Probably will be fixed with Inertia 2.0?
Hopefully!

[jonjakoblich]

+1, same issue, but with Jetstream.

I will try the workaround, but I think it's a bug. Probably will be fixed with Inertia 2.0? Hopefully!

I run into this myself with Jetstream as well, but only intermittently.

[kresnasatya]

Hi, I have this problem too. I use Inertia Laravel + Inertia/Svelte. Here's the issue I create in my repository: senkulabs/breeze-lite#4. I don't setup any route in my Svelte components. I just use @route blade directive that I put in app.blade.php. That's it. I was thinking that this is more than enough. But, it turns out no.

It turns out that I need to explicitly tell the vite the exact location of Ziggy's route in ssr.js or ssr.ts in order to solve this problem.

- import { route } from 'ziggy-js';
+ import { route } from '../../vendor/tightenco/ziggy';

[313ava]

I have the same issue with Laravel + inertia + vue

[313ava]

import {route as ziggyRoute} from "ziggy-js";
const route = inject<typeof ziggyRoute>("route")!;

I try this, but I got new error:
TypeError: route is not a function

@TiiFuchs

[DGINXREAL]

+1 i have the same issues.... Route is not defined only in ssr

[martijn94]

Having the same issue here

[EmanuelM]

The same problem persists with the Laravel Vue Starter Kit

I found a workaround by doing this in every component I need routes:

import {route as ziggyRoute} from "ziggy-js";
const route = inject("route")!;

This workaround worked for me, not in every component but its appears the error occurs on one specific

[Qoraiche]

to fix it, I have added this as a workaround on each component that uses route:

import {inject} from "vue";
const route = inject('route');

[bdlowery]

Is there any official fix to this? Any inertia app with SSR is just broken.

[pascalbaljet]

This was fixed in the Starter Kits with these PRs:

React

• Fix Inertia SSR errors laravel/react-starter-kit#53

Vue

• Fixing Inertia SSR errors laravel/vue-starter-kit#74
• Fix various TypeScript issues, simplify ziggy-js integration and shared props usage laravel/vue-starter-kit#127

import { ZiggyVue } from 'ziggy-js';

createServer((page) =>
    createInertiaApp({
        // ...
        setup: ({ App, props, plugin }) =>
            createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                }),
    }),
);

The key here is to use Ziggy's Vue plugin in the main SSR JavaScript file.