Can't assign properties on the admin site.

Question

Can't assign properties on the admin site.

Closed this issue 3 years ago · 33 comments

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

Answer 1 · 2021-02-02T19:41:42.000Z

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?

Answer 2 · 2021-02-02T20:22:07.000Z

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?

Answer 3 · 2021-02-02T20:29:42.000Z

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

Answer 4 · 2021-02-02T21:56:31.000Z

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')
;

Answer 5 · 2021-02-02T22:18:25.000Z

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?

Answer 6 · 2021-02-02T22:22:01.000Z

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

Answer 7 · 2021-02-02T22:25:49.000Z

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.

Answer 8 · 2021-02-02T22:54:55.000Z

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...

Answer 9 · 2021-02-03T07:56:07.000Z

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

Answer 10 · 2021-02-03T14:19:41.000Z

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?

Answer 11 · 2021-02-03T14:29:00.000Z

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

Answer 12 · 2021-02-03T14:29:19.000Z

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

Answer 13 · 2021-02-03T15:14:26.000Z

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')

@section('scripts')
@parent()
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Answer 14 · 2021-02-03T15:22:19.000Z

Ah, I think I got it, you need appshell.standalone.js (the one that loads all dependencies) instead of appshell.js.

Replace in webpack.mix.js:

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

to:

mix.js('resources/js/app.js', 'public/js')
   	.js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js')

ie. don't combine the frontend and the backend scripts.

More details: https://konekt.dev/appshell/2.x/admin-panel#appshell-as-separate-admin-ui

I think this will actually solve the problem :)

Answer 15 · 2021-02-03T15:47:14.000Z

Okay, now I have ...

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

... and I still get the Vue is not a constructor error

Answer 16 · 2021-02-03T18:46:29.000Z

But, this is not good:

mix.js([
'resources/js/app.js',
'vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js'
], 'public/js')

Replace it to:

mix.js('resources/js/app.js', 'public/js')
   	.js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js')

and compile it again

Answer 17 · 2021-02-03T19:54:43.000Z

Sorry, I copied the wrong text to the message. I have:

mix.js('resources/js/app.js', 'public/js')
.js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js');

in my webpack.mix.js. I redid the yarn dev, restarted the server, cleared my browser cache, reloaded, and I'm still getting the error. I put the generated appshell.js here, if that helps.

Answer 18 · 2021-02-04T14:49:31.000Z

I got it working with two changes:

in vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js:
change:
window.Vue = require('vue');
to:
window.Vue = require('vue').default;

in webpack.mix.js:
change:
mix.js('resources/js/app.js', 'public/js')
.js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js')
;
to:
mix.js('resources/js/app.js', 'public/js')
.js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js')
.vue()
;

Answer 19 · 2021-02-16T17:51:07.000Z

But this is not a viable fix. Since you have to change stuff in the vendor package. When can we expect a fix for this?

Answer 20 · 2021-02-16T17:53:19.000Z

All these files that require the changes are in the host application, thus it can be fixed there, as far as I understand the problem.

Answer 21 · 2021-02-16T18:22:00.000Z

Not this part.

in vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js:
change:
window.Vue = require('vue');
to:
window.Vue = require('vue').default;

Answer 22 · 2021-02-16T18:25:26.000Z

Whether it works or not depends on your particular setup. For most of the users the old formula is working, meaning, changing in the library will fix for you and break for them.

It's easy to mitigate on the app's end. It's safe to copy-paste the quoted AppShell code to your app.

Answer 23 · 2021-02-16T18:27:03.000Z

But I'm open to suggestions, of course. AppShell is not part of Vanilo, but I'm the maintainer there as well 👯

Answer 24 · 2021-02-16T18:35:45.000Z

Arg. Just looked at the actual the code. Neither of these solutions will work. Since vue is called directly in the dom. And the appshell is loaded above it. But vue is used before the page is finished with rendering. Should that vue code not be wrapped in something instead so that it waits until the page is loaded or not be inlined on the page?

Answer 25 · 2021-02-16T18:51:07.000Z

@addgod do you mean this one? https://github.com/vanilophp/framework/blob/master/src/resources/views/property-value/assign/_form.blade.php#L75

Answer 26 · 2021-02-16T19:38:54.000Z

Yah it seems no matter what I do, I get the following error.

Uncaught TypeError: Vue is not a constructor
at 1:539

Answer 27 · 2021-02-16T19:43:08.000Z

never f*****g mind. Browser cache ftw.

Answer 28 · 2021-02-16T19:44:31.000Z

Oh grate. New problem.

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

Answer 29 · 2021-02-16T19:45:36.000Z

It's weird, 'cause it's working in all the shop admins that are out there in production.
But the quoted code is quite shitty (shame on me), so I'll check it tomorrow if we can make it less shitty.

Answer 30 · 2021-02-16T19:50:02.000Z

So strange, now when I press manage, under properties on a product, nothing happens.

Hmm is there any known issues with running Vanilo with laravel 8 and breeze ?

Answer 31 · 2021-02-16T20:38:50.000Z

Ahh finally. This worked.

window.Vue = require('vue/dist/vue.esm').default;

Answer 32 · 2021-02-16T20:42:36.000Z

@fulopattila122 One question though. As I uderstand it, properties, these are variants of a product right? What if a variant costs more then the base product?

Say

T-Shirt - XXL - Black 99 euro
T-Shirt - S - Black 95 euro?

How would I go about handeling that?

Answer 33 · 2021-04-02T22:15:13.000Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed within 3 days if no further activity occurs. Thank you for your contributions.