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

[ghost]

I'm submitting a ... (check one with "x")

[ x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform
"jquery": "^3.3.1",
"vue-trumbowyg": "^3.4.0",
"vue": "^2.5.2",

• Browser name and version : All
  "vue-trumbowyg": "^3.4.0",

Current behavior
I installed jquery and trumbowyg via npm, imported jquery in my index.html file and the trumbowyg component along with the css in my component where I'd like to render the text editor. When I refreshed the page I had an error in my console stating:

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

found in

---> at component.vue
at src/pages/Blog.vue


at src/App.vue
vue.runtime.esm.js:587
TypeError: "this.el.trumbowyg is not a function"

And I only see a vertically resizable textarea in my own component.
I have also tried importing it as a plugin, however, I had an error about a watcher and not having passed the props 'value', after I passed the value prop to my component that error did not disappear either.

Expected behavior
Render the text editor.

Minimal reproduction of the problem with instructions
This is the code in my own component where I'm importing the trumbowyg editor and what renders.

https://pastebin.com/ZH0BnBPk
https://i.imgur.com/xbwEFaE.jpg

[ghost]

Forgot to define jquery in webpack config...

plugins: [
    new webpack.ProvidePlugin({
      Vue: ['vue/dist/vue.esm.js', 'default'],
      jQuery: 'jquery',
      $: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],

[gaeld]

Got the exact same problem.
Not using webpack.

window.$ = window.jQuery = jQuery = $ = require('jquery');
Been included in main.js

<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2"></script>
Has been added.

Still got the error.

[samdjstevens]

I am getting the same error - using Webpack, but also using the ProvidePlugin to expose global jQuery/Vue.

[ims-one]

same error - using Webpack.

[ankurk91]

If someone can share a minimal reproduction repo on github, I am happy to troubleshoot.

[preeteshjain]

@gaeld @ims-one @samdjstevens Did you guys get any solution?

[preeteshjain]

If someone can share a minimal reproduction repo on github, I am happy to troubleshoot.

@ankurk91 https://codesandbox.io/embed/vue-template-3d0xi

[ankurk91]

@preeteshjain
I tried my best, tried expose-loader too. But no luck.
The error is coming from trumbowyg itself.

[preeteshjain]

You are right, it seems like Trumbowyg isn't playing well with vue-cli apps at all.

Guess we will have to wait till v3 release which will drop the jQuery dependency.

[bert-w]

so how do I load this now? This plugin doesnt work out of the box. I am simply using the Vue plugin but it throws the above error.

[ankurk91]

@bert-w
I have been using this package with webpack without any issue.
I have also published a running example here
https://ankurk91.github.io/vue-trumbowyg/

You can check my webpack-config file in this repo.

[ngstwr]

@bert-w
I have been using this package with webpack without any issue.
I have also published a running example here
https://ankurk91.github.io/vue-trumbowyg/

You can check my webpack-config file in this repo.

You said earlier that "The error is coming from trumbowyg itself." But your example ar https://ankurk91.github.io/vue-trumbowyg is running well.

I tried downgrading the versions of the trumbowyg and vue trumbowyg both. Still getting the same error -
Error in mounted hook: "TypeError: this.el.trumbowyg is not a function"

[ankurk91]

But your example ar https://ankurk91.github.io/vue-trumbowyg is running well.

It means that this component does not have any issue at all, check you webpack configs.😉

[ankurk91]

I was able to run this component in a fresh vue-cli project.
I have added a wiki for the same.

https://github.com/ankurk91/vue-trumbowyg/blob/master/wiki/vue-cli.md

[vmangelovv]

someone with solution for this one??