quilljs with webpack-encore.

[bogdaniel]

I'm trying to figure it out how to setup aliases and everything from this webpack config for loading quilljs editor. maybe you guys have an idea or something.

Var path = require ('path');

Module.exports = {
  Entry: "./app.js",
  Output: {
    Path: __dirname + "/dist",
    Filename: "bundle.js"
  }
  Resolve: {
    Alias: {
      'Parchment': path.resolve(__ dirname, 'node_modules/parchment/src/parchment.ts'),
      'Quill $': path.resolve(__ dirname, 'node_modules/quill/quill.js'),
    }
    Extensions: ['.js', '.ts', '.svg']
  }
  Module: {
    Rules: [{
      Test: /\.js$/,
      Use: [{
        Loader: 'babel-loader',
        Options: {
          Presets: ['es2015']
        }
      }],
    }, {
      Test: /\.ts$/,
      Use: [{
        Loader: 'ts-loader',
        Options: {
          CompilerOptions: {
            Declaration: false,
            Target: 'es5',
            Module: 'commonjs'
          }
          TranspileOnly: true
        }
      }]
    }, {
      Test: /\.svg$/,
      Use: [{
        Loader: 'html-loader',
        Options: {
          Minimize: true
        }
      }]
    }]
  }
}

[weaverryan]

Hey @bogdaniel!

I haven't used quilljs before, but it doesn't look like it needs any special configuration. Their webpack-example (which I think you were working from) includes some configuration for typescript...but I don't think the library even needs that (but I could be wrong). It seems you an use a standard webpack.config.js file with Encore, then have something like this in one of your .js files:

var Quill = require('quill');
// or possibly this
var Quill = require('quill/core/quill');

var container = $('.editor').get(0);
var editor = new Quill(container);

Their docs are a bit confusing on how to use quill as a proper js module.

[bogdaniel]

Yeah i'm trying to follow their webpack config with nothing too fancy used yarn to install the libraries they said they are needed and after that i was stuck with the alias and that entire config.. :D

Reverted my webpack config to default from sf documentation and i'm gonna try with it clean :D gonna come back with an answer. :-)

[weaverryan]

@bogdaniel Ah, actually it makes more sense now - but it's still a bit of a mess:

1. It looks like you do need typescript, because they rely on a library called Parchment that uses it
2. For some reason they're doing something odd with their "main" script (https://github.com/quilljs/quill/blob/develop/package.json#L7) - pointing it at a dist file instead of a source file. That's what the "Quill" alias is for: it is so that when you require quill, it opens the quill/quill.js file instead of the file in the "main" key.

So basically, you have 2 possible options:

1. I think you might be able to use normal webpack.config.js config with Encore (no special stuff), and just do this in your js file:

var Quill = require('quill');
// the rest of the stuff

That would actually import the dist file... which isn't ideal, but might be a good workaround. But, it also may not work :).

2. You can add the missing config that you need at the bottom of your webpack.config.js file - like we talk about here: https://github.com/symfony/symfony-docs/blob/3.3/frontend/encore/advanced-config.rst. We haven't merged typescript support yet - see Add support to enableTypescriptLoader #50 - so you would need to add:

• The .ts loader config
• The 2 resolve.alias keys

And that's it :). Once #50 is loaded, all you should need to do is add the 2 resolve.alias keys. Or maybe you don't need those at all! I don't know that library at all, and I'm a little confused by their setup!

Let us know what you find out - including any errors!

[bogdaniel]

Good Morning @weaverryan. I think i managed doing everything, didn't use that pull request used the function addLoader() ( hope that's the purpose of it, and i got to this point

ts-loader: Using typescript@2.4.0 and 
html\node_modules\parchment\tsconfig.json
 ERROR  Failed to compile with 1 errors

 error

app.js from UglifyJs
Unexpected token: name (Parchment) [app.js:10359,4]

    + 166 hidden modules
error Command failed with exit code 2.

I think the issue from what i could find on google is because babel runs before typescript or something like that and uglifyjs only supports the es2015. :D i changed in babelConfig to use es2015 and ts es2015 but without any luck =D .

[weaverryan]

@bogdaniel Yep, that error I believe us exactly as you said: the current version of uglifyjs doesn't support es2015. Are/were you specifying any custom Babel config? Out-of-the-box, the Encore config should be transpiling your code to pre-es2015 code (so that Uglify doesn't choke on it). But, there could be something special happening related to Typescript. Also, post as much of your code as you can - it'll help debug :)

[weaverryan]

Closing this. I don't think there's any action for us to take unless we here a bit more.

Thanks @bogdaniel!

[UFOMelkor]

I had the same problem. I compiled TypeScript and got the error:

app.21d441c951b2b07969b9.js from UglifyJs
Unexpected token: name […]```

I found a solution here: babel/babel-preset-env#251 (comment)
After adding

delete module.exports.module.rules[0].exclude; // remove the exclude from the babel-loader

to my webpack.config.js everything works fine.

[remyzv]

I got the same problem an find the solution like this :

As mentionned by @weaverryan you just need to import Quill like this, for a simple use case :
var Quill = require('quill');

If you want to customize Quill @bogdaniel you should post your webpack config