Production Build is breaking Vue2-editor

[twickstrom]

First off this is fantastic! Thank you for your contribution!

In dev (local machine) this is working great. However when I push this into production I am getting errors. I have traced it back to the (FYI im using the default VUE webpack configuration) webpack.optimize.UglifyJsPlugin that is used to build the production code.

If I comment out:

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),

All is right with the world but there is a significant performance hit.

The following are the errors that present themselves:

TypeError: e.isBuffer is not a function
    at d (vue2-editor.js:1)
    at n (vue2-editor.js:1)
    at t.value (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at a.setQuillElement (vue2-editor.js:1)
    at a.initializeVue2Editor (vue2-editor.js:1)
    at a.mounted (vue2-editor.js:1)
    at Dt (vue.esm.js:2921)
    at Object.insert (vue.esm.js:4158)

AND

vue.esm.js:1741 TypeError: Cannot read property 'innerHTML' of null
    at a.value (vue2-editor.js:1)
    at wa.run (vue.esm.js:3233)
    at Rt (vue.esm.js:2981)
    at Array.<anonymous> (vue.esm.js:1837)
    at at (vue.esm.js:1758)

It is probably worth noting that it attaches to the text area, but any default data from v-model is not persisted into the textarea.

Any help would be appreciated!

[tangdada]

I have the same trouble!

[wanpan9527]

I had the same problem.

[curtjenk]

Anyone find a solution to this problem?

[twickstrom]

Yes,

I solved this by updating to the latest version of Uglify.JS.

Simply perform the following actions in the terminal.

cd ~/your project

npm i -D uglifyjs-webpack-plugin

Open:

/your-project/app/config/webpack.prod.conf.js

Add to the top:

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

And then look for plugins and change to:

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true
    }),

For complete documentation on the latest Uglify for webpack visit:

https://github.com/webpack-contrib/uglifyjs-webpack-plugin

Hope this helps!

[cuihp]

@twickstrom I tried your solution, but the mistake still exists. I am very sad. Please help me.

[curtjenk]

I'm using vue2-editor with the laravel framework. What worked for me was to revert to an older version of vue2-editor in my package.json ("vue2-editor": "2.4.3")

[davidroyer]

Cannot someone provide a link to a repo or a CodeSandbox project so I can see the setup being used?

[twickstrom]

@davidroyer upload the relevant pieces of your code and I will mack the changes and point them out to you. I don't have time to break up my app right now sorry

[davidroyer]

@twickstrom

Sorry, I think my comment was misleading. This is my repo.

I was asking if someone who is dealing this issue could provide their nonworking code so I could take a look because I wasn't able to reproduce the issue.

[twickstrom]

@davidroyer sorry man, great work on this editor. I guess I was over zealous in trying to help others.

It may be worth mentioning that I am using the bubble theme and loading it in the component as such:

import { VueEditor } from 'vue2-editor'
import 'quill/dist/quill.bubble.css'

For the build I am posting the code from the relevant files in the /app/build directory for reference. This has the fix include that I mention above.

webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

my web pack.prod.conf.js

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

var env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

The problem was not in your code but it was an underlying compatibility issue between Quill.js and older versions of Uglify.JS

By upgrading to UglifyJS v3 it solved the production build issues.

This is a simple procedure simply cd into your project:

npm i -D uglifyjs-webpack-plugin

Then open:
/app/build/webpack.prod.conf.js

Add to the top:

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

And then look for plugins UglifyJs and change to:

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    }
  },
  sourceMap: true
}),

See my files above for reference.

Hope this helps someone. It solved my issue.

[stoneomo]

@twickstrom Thank you! It solved my issue.

[dawnco]

@twickstrom 的方法解决了,没有报错了, solve it