Doesn't work with weback

[JoshZA]

Default vue-cli webpack build

WARNING in ./~/vue-quill/~/quill/dist/quill.js
Critical dependencies:
6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/vue-quill/~/quill/dist/quill.js 6:478-485

ERROR in ./~/vue-quill/~/quill-render/~/cheerio/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./package in C:\node\SerpAdmin\node_modules\vue-quill\node_modules\quill-render\node_modules\cheerio
 @ ./~/vue-quill/~/quill-render/~/cheerio/index.js 11:18-38

[BrockReece]

Hi Josh,

I don't use webpack personally, I could look into it though. The errors seem to be pointing at 3rd party dependencies, Quill-render and Quill maybe the problem is their end? Is that something you can test as you are more familiar with webpack?

Cheers Brock

[BrockReece]

https://github.com/cheeriojs/cheerio/pull/832 This PR should fix the issue, we just need to wait for it to be merged.

I hope this helps Brock

[JoshZA]

Hey Brock,

Thanks for looking into this, I'll wait until it's fixed upstream :+1:

[martinhearn]

@JoshZA add this to webpack config:

 plugins: [
    new webpack.NormalModuleReplacementPlugin(/^\.\/package$/, function(result) {
        if(/cheerio/.test(result.context)) {
            result.request = "./package.json"
        }
    }),

Source

[jefflam]

Hi guys, having this issue as well but am not sure how to resolve it. @martinhearn when I added your line to my Webpack plugins it resulted in another error instead...:

ERROR in ./~/babel-loader!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-quill/src/Quill.vue
Module not found: Error: Cannot resolve module 'quill' in /Users/jefflam/Sites/teleo/teleo-fe/node_modules/vue-quill/src
 @ ./~/babel-loader!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-quill/src/Quill.vue 7:12-28

Besides installing vue-quill and adding the above line to webpack config plugins are there any other things that I need to install?

[BrockReece]

Hi @jefflam

It looks like a problem with the quill.js dependency. What happens if you install quill through npm and try again?

npm install quill

[jefflam]

@BrockReece ah, looks like installing quill solved the issue. Interesting...

[BrockReece]

Good to hear that worked, I wonder why npm didn't install it as a dependancy... hmm

[jefflam]

Yeah.. I acutally did a 'npm install' again after installing vue-quill just to see if that did anything

[BrockReece]

I have just installed vue-quill in a new webpack project (built through vue-cli) and it has installed both of its dependencies correctly... I'm not sure why that didn't work for you, sorry.

[jefflam]

@BrockReece could it possibly be that I installed quill on its own before, and then installed vue-quill after hence resulting in a conflict?

Anyhow, I'm just appreciative of your response and that it is working now. :)

Btw, it's a little side track, but how do I actually pass in the options I want? I don't quite understand base on your documentation.. Is it via 'formats'? For example if I want to add a placeholder, do I do this:

<quill :content.sync="content" :formats="formats"></quill>

data () {
      return {
        content: {
          ops: []
        },
        formats: [{
          name: 'custom',
          options: {
            placeholder: 'Compose note...'
          }
        }]
...
...

[BrockReece]

Possibly, I have known npm to be a bit flakey when juggling different versions of dependancies.

There isn't currently a way to pass through a placeholder in the props, though it is something I can easily add. I am thinking of adding an 'options' prop that be passed through to configure quill, as explained in their docs http://quilljs.com/docs/configuration/

[BrockReece]

Hi @jefflam

I have just pushed a change that allows you to pass a config object through the props which will help you set up a placeholder. There is some instructions for this in the readme, under the configuration header. Give me a shout if you need any more help :)

Cheers Brock

[jefflam]

@BrockReece oh wow, thank you so much for assisting!

I was actually about to comment that it wasn't just passing the "placeholders" though, but also on the whole ability to set up what options I want to give the user for text formatting. For e.g. ['bold', 'italics', ...] etc. Would I also be able to do the same with your new props object?

I will give that a try and let you know if it works :)

[BrockReece]

@jefflam, no problem.

Yep, that new prop should now allow you to set up your formatting whitelist using something like this...

data() {
    config: {
        formats: ['bold', 'italics'],
        placeholder: 'Test...',
    },
}

[martinhearn]

@BrockReece just a heads-up to say that addModule is removed in v1 so the toolbar will need to be initialised within the config.

[BrockReece]

@martinhearn, thanks for that. I think there is going to be a lot of changes for v1 when it lands. I think it is in RC at the moment.

[jefflam]

Hmm for some reason passing the config still doesn't work for me. I suspect it has to do with the version of Quill that is being used in my project though (the fact that I have to install Quill again via npm on top or the vue-quill package).

That being said at this moment it seems like it is something off with my project and node modules.

Looks like there is a new version if Quill upcoming as well. I might just wait for v1 to be released and see how that goes!