ReferenceError: route is not defined

See original GitHub issue

I have an issue with Ziggy, I was using it first with the directive @routes but after switching to the artisan method the route helper function fails to import, ###Steps to reproduce in webpack.mix:

ziggy: path.resolve(
      __dirname,
      'vendor/tightenco/ziggy/dist/js/route.js'),
ziggyRoutes: path.resolve(
       __dirname,
      'resources/assets/js/ziggy.js'),

in app.js:

import route from 'ziggy';
import { Ziggy } from 'ziggyRoutes'

Vue.mixin({
    methods: {
        route: (name, params, absolute) => window._route(name, params, absolute, Ziggy),
    }
});

Current Behavior

[Vue warn]: Error in data(): “ReferenceError: route is not defined”

For bug reports only please provide

Currently installed Laravel version:

5.7

Currently installed Ziggy version

v0.6.8.1

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

5reactions

mazedlxcommented, Apr 23, 2020

Here’s what my setup looks like, it works without the @routes blade directive:

In app.js:

[...]
import route from 'ziggy';
import { Ziggy } from './ziggy';

window.route = route;
window.Ziggy = Ziggy;
Vue.mixin({
  methods: {
    route: (name, params, absolute) => route(name, params, absolute, Ziggy),
  }
});

in webpack.mix.js:

mix.webpackConfig({
  resolve: {
    alias: {
      ...
      ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
    },
  },
});

Compiles without errors, and everything works as expected. Hope this helps.

2reactions

RichardDerncommented, Mar 5, 2020

I have the exact same problem. I carefully followed the Artisan section of the readme, after composer require tightenco/ziggy.

In webpack.mix.js, I added:

// [...]
const path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },
});
// [...]

In app.js:

// [...]
require('./bootstrap');

import route from 'ziggy';
import { Ziggy } from './ziggy';

window.Vue = require('vue');

Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    }
});
// [...]

Then I generated the ziggy.js file:

php artisan ziggy:generate "resources/js/ziggy.js"

So the ziggy.js file is in the same directory as app.js (you should probably update default location to match new Laravel’s structure BTW)

Then:

npm run dev

Compiles without any problem.

Everything works if I add @routes to my blade view, but if I don’t, I get “ReferenceError: Can’t find variable: route”.