Can't assign properties on the admin site.

[phoenix-graphics]

Hi. So far things have gone well - nice software and good documentation. I'm having trouble assigning properties to products in the admin UI. I'm attaching the product properties page and then what I see on the product properties page and what I see when I try to assign properties. None of my properties are in the dropdown. Am I missing something to make this work?

Thanks, Bob Miller

[fulopattila122]

Hi Bob, it looks like some vuejs issue as far as I can judge from the screenshots. Do you see any errors in the browser's console?

[rmiller335]

Excuse my identity switch - I was on a customer account. Anyway, yes, it scrolled by but I get TypeError: Vue is not a constructor, which of course would explain it. Question is why. yarn list shows that I have vue@2.6.12 installed, and I did a yarn run dev, restarted the laravel server and cleared my browser cache. Any ideas?

[rmiller335]

More clues - /admin/product doesn't give me the vue error, but /admin/product/1 does

[rmiller335]

Also possibly helpful:

resources/js/app.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

// require('./bootstrap');

window.$ = window.JQuery = require("jquery");
window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

... and webpack.mix.js:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .scripts([
        'public/js/app.js',
        'vendor/konekt/appshell/src/resources/assets/js/appshell.js'
    ], 'public/js/app.js')
    .sass('vendor/konekt/appshell/src/resources/assets/sass/appshell.sass', 'public/css')
;

[fulopattila122]

Could you please try removing (or commenting out) these lines in resources/js/app.js:

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// const app = new Vue({
// el: '#app',
// });

and then re-run yarn run dev?

[fulopattila122]

Btw, I think this is the line that causes the error and prevents the assignment from working properly:

https://github.com/vanilophp/framework/blob/master/src/resources/views/property-value/assign/_form.blade.php#L75

[rmiller335]

Yes, I think that's the line. The changes to app.js didn't fix it. Here's some more information:

I have this on line 45744 of appshell.js:

window.Vue = __webpack_require__(/! vue / "./node_modules/vue/dist/vue.runtime.esm.js");

... and if I put a break there and step, window.Vue has a value:

Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}

... but then when I continue I get the error.

[rmiller335]

Not necessaritly progress, but I rewrote webpack.mix.js to ...

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js([
    'resources/js/app.js',
    'vendor/konekt/appshell/src/resources/assets/js/appshell.js'
], 'public/js/appshell.js')
    .vue()
    .sass('vendor/konekt/appshell/src/resources/assets/sass/appshell.sass', 'public/css')
;

... now devtools detects Vue, and I don't get the error. But neither of the Manage buttons work...

[fulopattila122]

The Demo app has a similar setup and that is known to work. Could you please try comparing with that webpack mix config?

https://github.com/vanilophp/demo/blob/2.x/webpack.mix.js

[rmiller335]

That gets me back to Vue is not a constructor in appshell.js. It looks to me as if vue is loaded in app.js, but app.js is not referenced in in the html, only appshell.js. Should it be?

[rmiller335]

Okay, if I add this in vendor/vanilo/framework/src/resources/views/property-value/assign/_form.blade.php just before the script section that has 'new Vue':

... then it works. I'm pretty sure this is not the right way to do it ;-) What do you recommend?

Thanks, Bob

[fulopattila122]

As far as I see, only app.js is referenced:

https://github.com/vanilophp/demo/blob/2.x/resources/views/layouts/app.blade.php#L105

[rmiller335]

I'm talking about the admin aap - I made this change to vendor/vanilo/framework/src/resources/views/property-value/assign/_form.blade.php:

@include('vanilo::property-value.assign._create_property_value')