route is not defined + ESLint

[betaSavvy]

Hi,

Does anyone know how to resolve'route' is not defined' error warning from ESLint(no-undef)?

Using vuejs 3 composition api + script setup. Apparently route is defined app.js within createInertiaApp > setup > mixin)

[rhysemmerson]

can you post the full error and the contents of your app.js?

if route refers to the ziggy route helper function you would need to set that up as a module as documented here for eslint to not complain

[delonnkoh-svt]

app.js

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .mixin({
        methods: {
          route,  // <-- eslint error
        },
      })
      .mount(el);
  },
});

And the error is ESLint: 'route' is not defined. (no-undef)

[rhysemmerson]

I'm assuming that route is the ziggy route helper. The ziggy helper is usually inserted inline using a blade directive and available on the window, it looks like that's the case with your app

Since this setup requires a global it's going to trigger the eslint rule. You can follow the guide on the ziggy docs to turn it into a module, or you can add a comment to app.js to tell eslint to ignore the no-undef for that file (this isn't a bad option because once it's registered with Vue it's available via the Vue api).

/* eslint no-undef: "off" */
import { createApp, h } from 'vue';
//...

[blairdow]

this is much later but my preferred way to deal with this is to add the "undefined" global variable to the globals in my eslint config, as shown here: https://eslint.org/docs/latest/use/configure/language-options#using-configuration-files