Laravel-Mix 4.0 error when configuring jquery for use with vue-trumbowyg

[stevegriffiths]

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 "vue-trumbowyg": "^3.6.0", "laravel-mix": "^4.0.0",

Current behavior Adding the Laravel-Mix configuration as described here: https://github.com/ankurk91/vue-trumbowyg/wiki/Laravel-Mix results in the following error when running 'npm run watch':

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'resolve'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

Expected behavior I would expect the npm run watch task to complete normally.

Minimal reproduction of the problem with instructions

[ankurk91]

Can you share your mix config file here

[stevegriffiths]

Yes sure, here's the file:

const webpack = require('webpack');
const jQueryPath = 'jquery/dist/jquery.js';

let 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/assets/js/app.js', 'public/js/app.min.js').sourceMaps(true, 'cheap-source-map');
mix.sass('resources/assets/sass/app.scss', 'public/css')
  .copy(['resources/assets/js/vendor/icons.svg'], 'public/js/ui/icons.svg');

mix.webpackConfig({
    module: {
      resolve: {
        alias: {
          'jquery$': jQueryPath,
        }
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        Vue: ['vue/dist/vue.esm.js', 'default'],
        jQuery: jQueryPath,
        $: jQueryPath,
        'window.jQuery': jQueryPath,
      }),
    ],
});

[ankurk91]

i will test and let you know soon.

[ankurk91]

@stevegriffiths Hey, i have updated the wiki page with correct configuration

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

Please try update config and report back here.

[stevegriffiths]

@ankurk91

Many thanks for your prompt response. I have ammended the code you as you suggested, this has cleared the initial build error but when I now try and use the Trumbowyg component I get this error in-browser:

Error in mounted hook: "TypeError: this.el.trumbowyg is not a function"

Additionally on every page I am getting two errors stemming from a different plugin:

Error in mounted hook: "TypeError: $(...).tablesorter is not a function"

This second error only appears with the extra Mix config - if I remove this config, the second error disappears.

[ankurk91]

You can follow the this issue here

Error in mounted hook: "TypeError: this.el.trumbowyg is not a function"

https://github.com/ankurk91/vue-trumbowyg/issues/17

[stevegriffiths]

@ankurk91 I actually think this is a separate issue from the one in the ticket you referenced, as that ticket is specific to vue-cli.

Having done some research and testing, I would suggest ammending the Wiki entry config example to the following:

mix.webpackConfig({
    resolve: {
      alias: {
        'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery'))
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        Vue: ['vue/dist/vue.esm.js', 'default'],
        jQuery: 'jquery',
        $: 'jquery',
        'window.jQuery': 'jquery',
      }),
    ],
});

Note that the jQuery path constant is no longer required with the above code.

I was finding that the original code resulted in multiple jQuery instances being loaded IF you also had to expose jquery as a global, window level property for other external libraries. Using the above avoid this issue.

[ankurk91]

vue-cli is also using webpack internally.

I will update the wiki soon.