Getting "TypeError: this.el.trumbowyg is not a function"

ngstwr commented 4 years ago

Hi Ankur,

First of all, thanks for creating this! I have been using this component for an year without an issue till now.

Recently I have started working on a new project, so used a boilerplate that I made earlier and updated this component along with others, via npm. I have been getting error since then. I have debugging for hours now but I couldn't find the cause of this error:

[Vue warn]: Error in mounted hook: "TypeError: this.el.trumbowyg is not a function"

found in

---> <Trumbowyg>
       <EditorWrapper> at resources/js/core/components/EditorWrapper.vue
         <BaseContainer> at resources/js/core/components/BaseContainer.vue
           <CommonForm> at resources/js/views/app/site/page/form.vue
             <Add> at resources/js/views/app/site/page/add.vue

This error was from this line under mounted hook inside your component:

this.el.trumbowyg(o.a.extend(!0, {}, {
     svgPath: this.svgPath
}, this.config)),

It was working under this combination earlier:

"laravel-mix": "^5.0.1",
"vue": "^2.6.11",
"jquery": "^3.4.1",
"vue-trumbowyg": "^3.4.2",

Right now, this are the versions of the libraries, which is giving me the issue:

"laravel-mix": "^5.0.4",
"vue": "^2.6.11",
"jquery": "^3.5.0",
"vue-trumbowyg": "^3.6.0",

And yes I have this on webpack.mix.js:

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
});

ankurk91 commented 4 years ago

similar to #17

ankurk91 commented 4 years ago

Try to update you mix configs like this

https://github.com/ankurk91/vue-trumbowyg/wiki/Laravel-Mix

ankurk91 commented 4 years ago

@ngstwr I am using my own package (webpack wrapper) in place of laravel-mix

https://github.com/ankurk91/laravel-bundler

So i never get to see issues comming with Laravel-mix.

ankurk91 / vue-trumbowyg

Getting "TypeError: this.el.trumbowyg is not a function" #40