"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: https://github.com/senkulabs/breeze-lite/issues/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';