tighten / ziggy

Use your Laravel routes in JavaScript.
MIT License
3.94k stars 250 forks source link

Uncaught TypeError: Cannot read property 'install' of undefined using advanced setup for Vue #426

Closed Sogl closed 3 years ago

Sogl commented 3 years ago

Ziggy version

1.1.0

Laravel version

6.20.27

Description

I was on ziggy 0.7.1 and used this instruction: https://github.com/tighten/ziggy/issues/154#issuecomment-494563621

Just updated to 1.1.0 and get this message in console:

Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (app.js?id=79eb9ae00d0f7c3297a7:33511)
    at Module../resources/assets/js/app.js (app.js?id=79eb9ae00d0f7c3297a7:6831)
    at __webpack_require__ (app.js?id=79eb9ae00d0f7c3297a7:41678)
    at app.js?id=79eb9ae00d0f7c3297a7:41959
    at Function.__webpack_require__.O (app.js?id=79eb9ae00d0f7c3297a7:41715)
    at app.js?id=79eb9ae00d0f7c3297a7:41961
    at app.js?id=79eb9ae00d0f7c3297a7:41963

Steps:

  1. Added to webpack.mix.js:

const path = require('path');

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


2. Added to `app.js`:
```js

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

Vue.use(ZiggyVue, Ziggy);

What I'm missing?

Ziggy call and context

<b-navbar-item :class="{ 'is-tab': transparentNavbar }" :href="route('home')">
    Main
</b-navbar-item>

Ziggy configuration

VM43533:1 Uncaught ReferenceError: Ziggy is not defined
    at <anonymous>:1:13
(anonymous) @ VM43533:1

Route definition

Route::get('/', 'HomeController@index')->name('home');
Sogl commented 3 years ago

A FEW MOMENTS LATER

I found ZiggyVue definition here: https://github.com/tighten/ziggy/blob/main/src/js/index.js

But not in 1.1.0 version: https://github.com/tighten/ziggy/blob/v1.1.0/src/js/index.js

So I downloaded a latest version from repo:

composer require tightenco/ziggy:dev-main

and changed my webpack.mix.js to:


mix.alias({
    ziggy: path.resolve('vendor/tightenco/ziggy/src/js/index'),
});

Now it works fine! Maybe need to update version and documentation?

dmanva commented 3 years ago

The README file is confusing right now, it doesn't correspond current release. See this PR for details.

bakerkretzmar commented 3 years ago

Yeah sorry about this, the Vue plugins haven't actually been released yet because of some build issues. I'm hoping to get to it this week!

blite commented 3 years ago

@Sogl thank you for updating this I ran into same issue today.

bakerkretzmar commented 3 years ago

Should now be fixed in v1.2.0!

blite commented 3 years ago

works great with


mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue")
});
 // or 'vendor/tightenco/ziggy/dist/vue' if you're using the Vue plugin

is slightly hidden in the documentation

thank you @bakerkretzmar