Vue-chartjs: Issues after using gulp-- production

[apocalyarts]

Hi! I am currently on vue 2.0.1 and vue-chartjs 2.2.0.

After ugrading to vue-chartjs 2.2.1.....

Expected Behavior

Everything should work, lol.

Actual Behavior

When using "gulp":

• Everything still works, yay.

When using "gulp --production":

• Pie Charts do not render anymore
• Uncaught ReferenceError: a is not defined(…)

Environment

• OS: Laravel Homestead VM on Windows
• NPM Version: 3.8.6
• Building with Laravel Elixir via Gulp and Webpack.

[apertureless]

Does this happen only with the pie chart?

[apocalyarts]

I only use Pie Charts so I cannot tell...

Lars Peterke [e-mail] schrieb am Fr. 9. Dez. 2016 um 13:16:

>
>

Jakub [e-mail] schrieb am Fr. 9. Dez. 2016 um 13:16:

Does this happen only with the pie chart?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/apertureless/vue-chartjs/issues/19#issuecomment-266000710,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAzHQ__WsikEUIq_eccL_KlClM4MwaSQks5rGUaCgaJpZM4LI3Cr
.

[apertureless]

It seems to be a problem with the minification. Will look into it.

[apertureless]

Seems to be only gulp / elixir related. As I can't reproduce it with a normal webpack config.

[apocalyarts]

Hmm thats weird because the 2.2.0 works. Did something change with the chartjs dependency? Maybe it is a bug on their end?

[apertureless]

I just updated chart.js and vue.js in this release.
I tested the current chart.js version with laravel. It worked fine.

I guess it has something to do with vue 2.1, or the gulp plugin for vue and how it handle module.exports
because it looks like, the imported modules lose somehow the chart.js dependency.

Still looking for a solution.

[apocalyarts]

Thank you for putting so much work in it. I'll try to update my dependencies to see if something changes when building with the latest laravel elixir package.

[apertureless]

Seems to be related to gulp-uglify.

First I thought that it might be related to vue 2.1 (it even may be). And I thought it could be the buble loader which is used by the elixir-vue2 package. I swapped out the buble loader with the normal babel-loader (as I experienced some problems with buble and missing pollyfills.)

However now gulp and gulp watch is working. But gulp --production throws a gulp-uglify error.
That would also explain why the normal webpack conf with the webpack uglifier is working without problems.

The error however indicates that some parts of the code are not transpiled properly with babel 🤔

[apertureless]

hey @apocalyarts

are you using the laravel-elixir-vue-2 package ?

It seems, that the problem is either this package, or buble. Because it uses buble instead of babel.
I tried to replace buble with babel, however I've got some uglifyjs errors. I don't know if buble is missing some polyfills.

To break it down, I completely removed the laravel-elixir-vue-2 package and added babel. And got it working. So this would be a workaround. I also don't know if it should be considered as a bug in this package or rather in the laravel-elixir-vue-2 package.

Workaround steps

1. Add .babelrc in root folder (where your gulpfile is)

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

2. Add webpack.conf.js in your root folder

var path = require('path')
var projectRoot = path.resolve(__dirname, './')

module.exports = {
   resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue': 'vue/dist/vue.common.js'
    }
  },
   module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
    ]
  },
}

3. Install dependencies

yarn add babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2 babel-core babel-loader vue-loader -D

Then you should be able to run gulp, gulp watch and gulp --production without problems.

[apocalyarts]

Yes I'm using laravel-elixir-vue-2. I'll post this issue to their repo and see if they can clarify things

[apertureless]

@apocalyarts Can you try to update to vue-chartjs 2.3.2 ?
I changed the release build, to be not minified. In my tests gulp --production worked now.

[apocalyarts]

I Can confirm that this fixes the issue. I even went on an updated vue to lastest 2.1 as well as all laravel elixir stuff. still works like a charm :)

Thank you so much :)