vuejs / rollup-plugin-vue Goto Github PK

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

Hello.
In Vue 2 it's possible to compile template to render functions. I gave it a try but got stuck trying to get rid of strict mode (template compilation uses with). My work is here. It's far from being enough for a PR but it shows how easy it is to compile to a render function.

It'd be great to provide an option like compileTemplate that defaults to false.

I'm willing to keep working on this and add the feature (with tests and doc) but I really need some help, I don't know rollup much. This is the config I was testing with:

const rollup = require('rollup').rollup
const node = require('rollup-plugin-node-resolve')
const cjs = require('rollup-plugin-commonjs')
const vue = require('rollup-plugin-vue')
const buble = require('rollup-plugin-buble')
const replace = require('rollup-plugin-replace')
const fs = require('fs')

rollup({
  entry: 'test/unit/specs/Hello.spec.js',
  plugins: [
    replace({
      'process.env.VUE_ENV': "'browser'"
    }),
    vue({css: false}),
    node(),
    cjs(),
    buble({ safe: false })
  ]
})
  .then(function (bundle) {
    var code = bundle.generate({
      format: 'iife',
      sourceMap: 'inline',
      useStrict: false
    }).code
    return write('dist/papier.test.js', code).then(function () {
      return code
    })
  })
  .catch(logError)

function write (dest, code) {
  return new Promise(function (resolve, reject) {
    fs.writeFile(dest, code, function (err) {
      if (err) return reject(err)
      console.log(blue(dest) + ' ' + getSize(code))
      resolve()
    })
  })
}

function getSize (code) {
  return (code.length / 1024).toFixed(2) + 'kb'
}

function logError (e) {
  console.log(e)
}

function blue (str) {
  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
}

Similar as in issue #55 I am getting the template validator warnings. Using version 2.2.20 and Vue 2.1.10.

Warning in lib/table/table.vue:
 
  12 |         @click="e => emitClickRow(e, row)">
  13 |         <row-cells :row="row" :rowIndex="rowIndex"></row-cells>
    |         ^
  14 |       </tr>

  Tag <row-cells> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.

My Rollup plugins configuration:

plugins: [
  alias(Object.assign({
    resolve: ['.jsx', '.js']
  }, require('./alias'), opts.alias)),
  nodeResolve({
    extensions: [ '.js', '.json', '.vue' ]
  }),
  vue({
    compileTemplate: true
  }),
  buble({
    objectAssign: 'Object.assign',
    jsx: 'h'
  }),
  nodeResolve({
    jsnext: true,
    main: true,
    browser: true
  }),
  commonjs()
]

Should it be a dependency or peerDependency of rollup-plugin-vue inside?

The readme should have information that this plugin doesn't work with blocks that should be transpiled, eg.

<template lang="coffee"></template>
<style lang="stylus"></style>

At the very least the errors could be a bit more obvious than the current:

(vue plugin) [rollup-plugin-vue] could not find place to inject template in script.

Hi!
I stumbled upon a obscure bug. Created repo as proof of concept: https://github.com/szwacz/rollup-vue-bug

To reproduce...

git clone https://github.com/szwacz/rollup-vue-bug.git
cd rollup-vue-bug
npm install
npm start

Now go to file foo.vue and make in it syntax error, for example delete closing paren:

var foo = 'bar';
console.log(foo

Hit save.
Console will report error - so far so good.
Now fix the code and hit save again.
The console is telling...

bundling...
Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

...and the watch need to be restarted in order to work again.

This is when you create a render function.

It should be enough to change at line 155:

    const template = nodes.template
            ? processTemplate(nodes.template, filePath, code, options)
            : null;
    if (options.compileTemplate && template) {

Everything else is just the same

node-sass, less and stylus are optional dependencies. If you are using scss/sass/less/stylus you should require (yarn add --dev node-sass less stylus) them.
http://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=style-languages

The document says so, but I encountered Error: Cannot find module 'node-sass' error even if I don't use sass.

Expected behavior

No errors.

Actual behavior

Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (****\test-
workspace\node_modules\rollup-plugin-vue\dist\rollup-plugin-vue.common.js:24:28)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

Steps to reproduce the behavior

1. $ npm install rollup-plugin-vue
2. $ node -e "require('rollup-plugin-vue')"

Following warning should not exist when dealing with Vue 2 in certain scenarios:

Tag <slot> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.

I think there should be a way to disable this warning.

Awesome work with this plugin! Keep up the good job!

This is an internal flag that allows Vue's runtime to pick the correct Proxy strategy to detect variable reference errors during render, depending on whether with has been stripped by vue-template-es2015-compiler.

The same is done in vue-loader: https://github.com/vuejs/vue-loader/blob/master/lib/template-compiler.js#L83

A bit hacky, but luckily that there are not many tools that actually need to be aware of this flag.

Great work on this plugin, btw!

Expected behavior

I would like to have the css styles injected inside '<style/>' tags like explained here: https://vuejs.org/v2/guide/deployment.html#Pre-Compiling-Templates

I have 1 or 2 CSS rules per component, so I don't want to extract them to a separate file.

Actual behavior

By default, it extracts it at the root of my project in a file called 'bundle.css'

Is there a way to disable CSS extraction?

Expected behavior

When compiliing a template like <Msg/> you expect the result to be _c('Msg')

Actual behavior

It yields _c('msg')

Steps to reproduce the behavior

I'll shortly add a PR with the failing test case

Error parsing C:\wamp\www\ECS\node_modules\vue\dist\vue.common.js: Unexpected token (947:29) in C:\wamp\www\ECS\node_modules\vue\dist\vue.common.js

Is an issue I'm seeing when using vue and rollup.
I'm using vue 1.0.26.

Hello,

I get an error when bundling the following Vue 2 component:

<template>
  <input type="checkbox" :disabled="disable">
</template>

<script>
export default {}
</script>

The error is:

17:19 $ npm run build js simple

> [email protected] build /work/quasar
> node build/script.build.js "js" "simple"

 Building...
{ [SyntaxError: Error transforming /work/quasar/src/vue-components/checkbox/checkbox.vue with 'babel' plugin: /work/quasar/src/vue-components/checkbox/checkbox.vue: Unexpected token (6:124)]
  pos: 129,
  loc: Position { line: 6, column: 124 },
  _babel: true,
  codeFrame: '\u001b[0m \u001b[90m 4 | \u001b[39m\n \u001b[90m 5 | \u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 6 | \u001b[39m\u001b[36mexport\u001b[39m \u001b[36mdefault\u001b[39m {render\u001b[33m:\u001b[39m \u001b[36mfunction\u001b[39m(){\u001b[36mif\u001b[39m(window\u001b[33m.\u001b[39m__VUE_WITH_STATEMENT__){\u001b[36mreturn\u001b[39m _h(\u001b[32m\'input\'\u001b[39m\u001b[33m,\u001b[39m{attrs\u001b[33m:\u001b[39m{\u001b[32m"type"\u001b[39m\u001b[33m:\u001b[39m\u001b[32m"checkbox"\u001b[39m\u001b[33m,\u001b[39m\u001b[32m"disabled"\u001b[39m\u001b[33m:\u001b[39m}})}}\u001b[33m,\u001b[39mstaticRenderFns\u001b[33m:\u001b[39m []\u001b[33m,\u001b[39m}\n \u001b[90m   | \u001b[39m                                                                                                                            \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 7 | \u001b[39m\u001b[0m',
  rollupTransform: true,
  id: '/work/quasar/src/vue-components/checkbox/checkbox.vue',
  plugin: 'babel' }

Seems like it doesn't like :disabled attribute. Once I change to disabled="disabled" (notice no :) it bundles ok.

It may be babel-preset-es2015-rollup at fault here?

Cheers.

Hi, thank you for your work.
I tried to use your plugin like this:

// rollup.config.js 
import vue from 'rollup-plugin-vue'
import buble from 'rollup-plugin-buble'

export default {
  entry: './assets/js/main.js',
  plugins: [
    vue(),
    buble()
  ]
}

When i run rollup -c i'm getting the following:

Cannot find module 'rollup-plugin-vue'
Error: Cannot find module 'rollup-plugin-vue'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/tmp/rollup-vue/rollup.config.js:5:27)
    at Module._compile (module.js:556:32)
    at Object.require.extensions..js (/usr/lib/node_modules/rollup/bin/rollup:761:8)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)

To make it work i went to /node_modules/rollup-plugin-vue and launched npm run build there.

After npm i -D [email protected] and running my gulp vueify task:

Error: Cannot find module 'merge-options'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/var/www/s4l.divergent.io/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.common.js:33:36)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

Same task works with v2.2.21 of this plugin, so I believe it is an issue with the beta.

Support pug and jade for templates.

I think would be better if the user can choose to use or not babel. Maybe the user wants to use buble (my case) and have to install all the babel dependencies (that is huge).

I am trying to get scoped CSS but nothing I try is working.

Here's my gulp task:

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

var caches = {};
gulp.task('vueify', ['bower'], function() {
  return gulp.src('./src/**/*.{js,scss,vue}')
    //.pipe(sourcemaps.init())
    .pipe(rollup({
      // https://www.npmjs.com/package/gulp-rollup#options
      entry: ['./src/main.js'],
      impliedExtensions: ['.js', '.vue'],
      moduleName: 'app',
      separateCaches: caches,
      format: 'iife',
      plugins: [
        vue({
          // http://rollup-plugin-vue.znck.me/configuration/
          //css: "app.css",
          compileTemplate: true,
          styleToImports: true,
          //autoStyles: true,
          //disableCssModuleStaticReplacement: false,
          modules: {
            generateScopedName: '[name]__[local]',
          },
        }),
        scss({
          output: './css/compiled.css',
        }),
        buble(),
      ],
    }))
    .on('bundle', function(bundle, name) {
      caches[name] = bundle;
    })
    .on('error', function(e) {
      console.error(e);
    })
    //.pipe(sourcemaps.write())
    .pipe(gulp.dest('./js'))
});

main.js

import TestVue from './test.vue';
export default TestVue;

test.vue

<template>
  <p :class="$style.test"><em>{{ greeting }} Yall!</em></p>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello",
    };
  },
};
</script>

<style lang="scss" module>
.test {
  background-color: yellow;
  em {
    color: blue;
  }
}
</style>

No matter what I try the compiled CSS selectors are not scoped for the single component.

Similar to vue-loader scoped styles

The following Vue file:

Throws the error:

(vue plugin) Cannot read property 'call' of undefined

Less & Sass working as expected.

Codacy detected an issue:

Message: Expected { after 'if' condition.

Occurred on:

• Commit: e2010df
• File: src/index.js
• LineNum: 17
• Code: if (!filter(id)) return null

Currently on:

• Commit: 8ac9f6b
• File: src/index.js
• LineNum: 17

It is implemented in rollup-plugin-vue2

Expected behavior

Should not give warning.

Actual behavior

Gives warnings:

 Warning in src/vue-components/data-table/DataTable.vue:
 
  58 | 
  59 |     <div v-else class="q-data-table-container" @mousewheel="mouseWheel" @DOMMouseScroll="mouseWheel">
    |                                                                         ^
  60 |       <div v-if="hasHeader" class="q-data-table-head" ref="head" :style="{marginRight: scroll.vert}">

  Found camelCase attribute: @DOMMouseScroll="mouseWheel". HTML is case-insensitive. Use @dommouse-scroll="mouseWheel" instead. Vue will automatically interpret it as camelCase in JavaScript. If this is an SVG camelCase attribute, use the .camel modifier.


 Warning in src/vue-components/data-table/plugins/sticky-cols/TableSticky.vue:
 
  27 |     <tbody v-if="!head">
  28 |       <slot></slot>
    |       ^
  29 |     </tbody>

  Tag <slot> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.


 Warning in src/vue-components/data-table/TableContent.vue:
 
  26 |     <tbody v-else>
  27 |       <slot></slot>
    |       ^
  28 |     </tbody>

  Tag <slot> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.

Steps to reproduce the behavior

• Clone Quasar Framework repo (https://github.com/quasarframework/quasar)
• NPM install
• Run npm run build js simple

This has been fixed in previous versions but upgrading to "rollup": "^0.41.4" and "rollup-plugin-vue": "2.2.18" brings back the problem.

Awesome work with this plugin. When I have some money I will donate for it. Any links for this? Thanks!

If there is no script tag, it should use the following as script:

export default {
}

In package.json devDependencies I have:

"rollup-plugin-vue": "^2.2.21",
"vue": "^2.2.1",

When I run my gulp vueify task I get an error:

Vue packages version mismatch:

- [email protected]
- [email protected]

Please update dependencies to use vue-template-compiler v2.2.1.

Example Plugin Usage

rollup.rollup({
  entry: 'index.js',
  plugins: [
    vue({
      htmlMinifier: {
        collapseBooleanAttributes: false
      }
    })
  ]
})
// ...

Expected Behaviour

Template string <element :disabled="disabled"></element> won't be transformed to <element :disabled></element>

Actual Behaviour

Template string <element :disabled="disabled"></element> gets transformed to <element :disabled></element> since the options passed to the plugin (see example above) aren't actually applied.

Hello,

I'm getting this error when trying to run rollup in development mode:
writeFile is not defined
...at compileStyle (..../node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.common.js:258:9)

rollupConfig: https://gist.github.com/congrady/1797c706c0229d65826842028756bb45
package.json: https://gist.github.com/congrady/611f2fc76c8adb389e201f0163c6f52f

Os X El Captain

running with "yarn run dev"

Anyone can help? Thanks a lot!

<ol class="options" v-show="has_vote && vote_show_state==1"></ol>

to

template: "<ol class=options v-show=\"has_vote &amp;&amp; vote_show_state==1\"></ol>"

&& compile to &&

Hi,

This is more of a question, so sorry if opening an issue is not appropriate, but I didn't know who to contact.
My question is: when do you think Vue 2 components with template will be supported?

Great project and keep up the good work!

Thanks,
Razvan

Expected behavior

Not sure if this is a main Vue doc issue, or only rollup-plugin-vue's. But it seems templates need a single root elem, and other elems are lost. Would be nice if the plugin could at least emit a warning about this.

Steps to reproduce the behavior

.vue file with:

<template>
  <h1>x</h1>
  <h2>y</h2>
</template>

rollup:

vue({compileTemplates:true})

When using the compileTemplate option the render function doesn't have the with statement.
Example on #19

from the readme:

Default behaviour is to write all styles to the bundle destination where .js is replaced by .css

but style.js bails if there is no destination string:

https://github.com/znck/rollup-plugin-vue/blob/master/src/style.js#L33-L35

if (typeof dest !== 'string') {
    return
}

with defaults (no css option), i do not get a css file; i would like to get it

//  src/index.js
import Dial from '../components/dial/index.vue';
if (window.Vue) {
   Vue.component('dial', Dial);
   const vm = new Vue({
        el: '#app',
   });
}

<!--components/dial/index.vue-->
<template>
    ...
</template>
<style>
</style>
<script>
    import Dial from '../../node_modules/lottery/src/dial';
    export default {
        data() {
            return {}
        },
        mounted: function () {
            this.$nextTick(()=> {
                this.lottery = new Dial();
            });
        }
    }
</script>

// node_modules/lottery/src/dial.js
class Dial {
    constructor(pointer, options) {
   }
}
export default Dial;

//rollup config
rollup({
        entry: '',
        plugins: [
            vue({
                css: null
            }),
            babel({
                exclude: 'node_modules/**',
                presets: ['es2015-loose-rollup']
            })
        ]
    });

compile to

// index.js

(function () {
.....

class Dial$1 {
    constructor(pointer, options) {
    }
}

var Dial = { template: "...",
    data() {
        return {}
    },
    mounted: function () {
        this.$nextTick(()=> {
            this.lottery = new Dial$1();
        });
    }
};

if (window.Vue) {
    Vue.component('dial', Dial);
    var vm = new Vue({
        el: '#app'
    });
}

}());

.vue import es6 ~ babel not compile
maybe I should not do it?

I am getting the following error in the browser:
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance) - vue.common.js:2562

My current setup:

rollup.config.js

import buble from 'rollup-plugin-buble';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import vue from 'rollup-plugin-vue';
import nodeGlobals from 'rollup-plugin-node-globals';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',
  sourceMap: true,
  plugins: [
    vue(),
    buble(),
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    commonjs(),
    eslint({
      exclude: [
        'src/styles/**'
      ]
    }),
    nodeGlobals(),
    (process.env.NODE_ENV === 'production' && uglify()),
  ]
}

main.js

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Hey!

Are you planing npm publish soon?

Steps to reproduce the behavior

Go to http://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=template and check console.

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at e (https://unpkg.com/[email protected]/dist/docute.js:1:147497)
    at a (https://unpkg.com/[email protected]/dist/docute.js:1:148052)
    at e.default (https://unpkg.com/[email protected]/dist/docute.js:1:120861)
    at jumpToId (https://unpkg.com/[email protected]/dist/docute.js:1:14519)
    at Array.<anonymous> (https://unpkg.com/[email protected]/dist/docute.js:1:3632)
    at j.dispatch (https://unpkg.com/[email protected]/dist/docute.js:1:8967)
    at j.dispatch (https://unpkg.com/[email protected]/dist/docute.js:1:8025)
    at a.n.(anonymous function) (https://unpkg.com/[email protected]/dist/docute.js:1:11258)
    at a.n [as jumpToId] (https://unpkg.com/[email protected]/dist/docute.js:1:20617)
    at a.navigate (https://unpkg.com/[email protected]/dist/docute.js:1:133521)

Expected behavior

Works like a charm.

Actual behavior

With option css: 'dist/main.css' it outputs: Error: ENOENT: no such file or directory, open 'dist/main.css'

Hi, currently only the first style tag in a vue component gets passed to the css function, but a component supports having multiple style tags.
At first, I was going to implement it but the tests are a bit too generic. Adding the corresponding test will need quite some refactor on the tests and since this is not my project my way of doing it may not match your way.

Overall, adding support for multiple styles is quite easy: just use an array at https://github.com/znck/rollup-plugin-vue/blob/master/src/vueTransform.js#L177 for style or any non template/script node (that'd allow adding support for custom blocks in the future)

Hi again, the last release seems to be broken. When installing with yarn you get:

error Couldn't find a package.json (or bower.json) file in /Users/posva/.yarn-cache/npm-rollup-plugin-vue-2.2.9

I searched but couldn't find any useful information. The package.json is there and removing node modules + cleaning the cache does nothing. 😔

I created a test case in rollup play ground, and it works fine.
http://rollupjs.org/#%7B%22options%22%3A%7B%22format%22%3A%22cjs%22%2C%22moduleName%22%3A%22myBundle%22%2C%22globals%22%3A%7B%7D%7D%2C%22modules%22%3A%5B%7B%22name%22%3A%22main.js%22%2C%22code%22%3A%22import%20quote%20from%20%20'module_1.js'%22%7D%2C%7B%22name%22%3A%22module_1.js%22%2C%22code%22%3A%22import%20QuoteService%20from%20'module_2.js'%5Cnexport%20default%20%7B%5Cn%20%20%20%20name%3A%20%5C%22Quote%5C%22%2C%5Cn%5Cn%20%20%20%20data%3A%20function()%7B%5Cn%20%20%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20quote%3A%20%5C%22%5C%22%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%2C%5Cn%5Cn%20%20%20%20ready%3A%20function()%20%7B%5Cn%20%20%20%20%20%20var%20quote%20%20%3D%20QuoteService.getQuote(this).quote%5Cn%20%20%20%20%20%20this.%24set('quote'%2C%20quote)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%22%7D%2C%7B%22name%22%3A%22module_2.js%22%2C%22code%22%3A%22export%20default%20%7B%5Cn%20%20getQuote(ctx)%7B%5Cn%20%20%20%20%2F%2F%20Here%20you%20would%20make%20a%20request%20to%20your%20server%5Cn%5Cn%20%20%20%20%2F%2F%20return%20ctx.%24http.get('http%3A%2F%2Fyourserver.com%2Fapi'%2C%20function%20(data%2C%20status%2C%20request)%20%7B%5Cn%20%20%20%20%2F%2F%20%20%20%20%20%20%20return%20data%3B%5Cn%20%20%20%20%2F%2F%20%20%20%7D).error(function%20(data%2C%20status%2C%20request)%20%7B%5Cn%20%20%20%20%2F%2F%20%20%20%20%20%20%20return%20data%3B%5Cn%20%20%20%20%2F%2F%20%20%20%7D)%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20quote%3A%20%5C%22Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%5C%22%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%22%7D%5D%7D

Please add documentation for the 'cssModules' configuration option. Also update master/test/test.js which uses 'modules'. You should also demo this in your example build. generateScopedName: '[name]__[hash:base64:5]' 👍

It looks like the function gets called twice. It can be seen on #19

Thank you @znck, this plugin is very much needed!

After the error ReferenceError: React is not defined and LOL I can confirm the plugin doesn't support JSX transformation and somehow uses the React one. I can even see in yarn.lock the react references, although is not a direct dependency.

I am not sure about the solution, relatively new to Rollup and bundlers plugins, but would like to help in any matter possible, so let me know!

Since upgrading to 2.2.10, I'm getting the following error when trying to rollup. Switching back one version makes everything work as expected. I'm not completely clear on what this error is referring to, any ideas?

Error transforming /path/to/src/components/App.vue with 'vue' plugin: 'import' and 'export' may appear only with 'sourceType: module' (9:2)
SyntaxError: Error transforming /path/to/src/components/App.vue with 'vue' plugin: 'import' and 'export' may appear only with 'sourceType: module' (9:2)
5 :
6 :
7 :
8 :
9 :   import Toolbar from './Toolbar.vue';
      ^
    at Parser.pp$4.raise (/path/to/node_modules/vue-template-es2015-compiler/buble.js:2231:15)
    at Parser.pp$1.parseStatement (/path/to/node_modules/vue-template-es2015-compiler/buble.js:727:16)
    at Parser.pp$1.parseTopLevel (/path/to/node_modules/vue-template-es2015-compiler/buble.js:648:25)
    at Parser.parse (/path/to/node_modules/vue-template-es2015-compiler/buble.js:526:17)
    at parse (/path/to/node_modules/vue-template-es2015-compiler/buble.js:3108:39)
    at Object.transform (/path/to/node_modules/vue-template-es2015-compiler/buble.js:11969:9)
    at transpile (/path/to/node_modules/vue-template-es2015-compiler/index.js:17:20)
    at injectRender (/path/to/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.common.js:82:20)
    at processScript (/path/to/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.common.js:168:18)
    at vueTransform (/path/to/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.common.js:206:14)

Shouldn't this document.create be document.createElement?

Everything's on the title

Uncaught SyntaxError: Strict mode code may not include a with statement

Issues with with(this)

v2.2.3 code not change，Whether you forgot to add code change？

It can be done in one these ways:

• Export compiled CSS as vendor.common.css
• Export compiled SCSS as vendor.common.scss
• Inject CSS in JS

I choose 2nd.

Any other suggestions?

Hello, in package.json of this project there are few dependencies with latest version range. Is this intentional? Because from my experience this means problems waiting to happen.