Rollup-plugin-vue: "Cannot read property 'length' of undefined" when rebuilding with separateCaches

[macu]

When using the rollup option separateCaches to speed up successive builds for gulp.watch, I get an error on each rebuild. On the first run it builds successfully because separateCaches is undefined.

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var rollup = require('gulp-rollup');
var buble = require('rollup-plugin-buble');
var vue = require('rollup-plugin-vue');
var scss = require('rollup-plugin-scss');
var uglify = require('rollup-plugin-uglify');
var rename = require('gulp-rename');

var caches = {};
gulp.task('vueify', function() {
  return gulp.src('./src/**/*.{js,scss,vue}')
    .pipe(sourcemaps.init())
    .pipe(rollup({
      // https://www.npmjs.com/package/gulp-rollup#options
      entry: './src/app.js',
      impliedExtensions: ['.js', '.vue'],
      allowRealFiles: true,
      moduleName: 'app',
      separateCaches: caches,
      format: 'iife',
      plugins: [
        vue({
          // http://rollup-plugin-vue.znck.me/configuration/
          compileTemplate: true,
          styleToImports: true,
          cssModules: {
            generateScopedName: '[name]__[hash:base64:5]',
          },
        }),
        scss({
          output: './css/compiled.css',
          includePaths: config.sassIncludePaths,
          outputStyle: 'compressed',
        }),
        buble(),
        uglify(),
      ],
    }))
    .on('bundle', function(bundle, name) {
      caches[name] = bundle;
    })
    .on('error', function(e) {
      console.error(e);
    })
    .pipe(rename('compiled.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./js'));
});

gulp.task('vueify:watch', ['vueify'], function() {
  gulp.watch('./src/*', ['vueify']);
});

$ gulp vueify:watch
[14:24:09] Using gulpfile /.../gulpfile.js
[14:24:10] Starting 'vueify'...
./css/compiled.css 141 kB
[14:24:14] Finished 'vueify' after 3.68 s
[14:24:14] Starting 'vueify:watch'...
[14:24:14] Finished 'vueify:watch' after 19 ms
[14:24:18] Starting 'vueify'...
{ Error: Could not load /.../src/test-component.vue.0.vue.component.scss (imported by /.../src/test-component.vue): Cannot read property 'length' of undefined
    at /.../node_modules/rollup/dist/rollup.js:9447:10
    at process._tickCallback (internal/process/next_tick.js:103:7)
  name: 'Error',
  message: 'Could not load /.../src/test-component.vue.0.vue.component.scss (imported by /.../src/test-component.vue): Cannot read property \'length\' of undefined',
  stack: 'Error: Could not load /.../src/test-component.vue.0.vue.component.scss (imported by /.../src/test-component.vue): Cannot read property \'length\' of undefined\n    at /.../node_modules/rollup/dist/rollup.js:9447:10\n    at process._tickCallback (internal/process/next_tick.js:103:7)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-rollup' }
[14:24:18] Finished 'vueify' after 291 ms

[znck]

What version are you using?

Can you create a minimal repro repository?

[macu]

rollup-plugin-vue v2.3.0-beta.5
https://github.com/macu/rollup-plugin-vue-build-error-demo

[lukasjuhas]

Hey @macu,

I actually had the same problem, I would recommend installing 2.2.21 for now. That solved problem for me.

I tried to play with this a bit to see what's happening but I could not find any other solution, maybe If I'll have change I'll look into this further.

[sunnylost]

Hi, i was just debug the gulp-rollup code, and find the problem.

these lines were trying to construct cache option:

 if (separateCaches && Object.prototype.hasOwnProperty.call(separateCaches, entryFile)) {
      options.cache = separateCaches[entryFile];
}

but rollup didn't except that structure, it needs cache with a Map property which name is modules, so I changed the above codes into this:

if (separateCaches && Object.prototype.hasOwnProperty.call(separateCaches, entryFile)) {
    let cacheMap = new Map()
    cacheMap.set( entryFile, {
        id: entryFile,
        originalCode: separateCaches[entryFile]
    })
    options.cache = {
        modules: cacheMap
    };
}

and then the exception was gone, and the result was right.

I'm not familiar with rollup or gulp-rollup, and didn't have enough time to dig deeper, sorry if i was wrong. :smiley:

[znck]

It would compile CSS on every transform request for .vue file now.