v2.2.3 compile error

[94cstyles]

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？

[znck]

Share steps to reproduce the error!

[94cstyles]

<template>
    <transition :name="effect" @after-leave="afterLeave">
        <div class="u-dialog" :class="dialogClass" v-if="rendered">
            <div class="dialog-wrapper">
                <slot></slot>
            </div>
            <div class="dialog-mask" @touchmove.stop.prevent></div>
        </div>
    </transition>
</template>
<style>
</style>
<script>
    export default {
        props: {
            rendered: {
                type: Boolean,
                default: false
            },
            effect: {
                type: String,
                default: 'bounce'
            },
            dialogClass: {
                type: String,
                default: ''
            }
        },
        methods: {
            afterLeave() {
                this.$destroy(); //动画结束 立即摧毁
                document.body.removeChild(this.$el);
            }
        }
    };
</script>

compile to

(function(){
'use strict';
var dialog = { render: function () {
        with(this) {
            return _h('transition', { attrs: { "name": effect }, on: { "after-leave": afterLeave } }, [rendered ? _h('div', { staticClass: "u-dialog", class: dialogClass }, [_h('div', { staticClass: "dialog-wrapper" }, [_t("default")]), _h('div', { staticClass: "dialog-mask", on: { "touchmove": function ($event) {
                        $event.stopPropagation();$event.preventDefault();
                    } } })]) : _e()]);
        }
    }, staticRenderFns: [],
    props: {
        rendered: {
            type: Boolean,
            default: false
        },
        effect: {
            type: String,
            default: 'bounce'
        },
        dialogClass: {
            type: String,
            default: ''
        }
    },
    methods: {
        afterLeave: function () {
            this.$destroy(); //动画结束 立即摧毁
            document.body.removeChild(this.$el);
        }
    }
};
});

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

[znck]

Compiled code is apparently correct. The warning may be caused by any post processing library. Try using this rollup config file (rollup.config.js).

And compile with

rollup -c --input MyComponent.vue

[94cstyles]

Compile the results are indeed correct. But with encounter strict mode will Being given.
Such modifications may be：with(this) update to if(this)

[znck]

with(this) is replaced with if(window.__VUE_WITH_STATEMENT__) and when bundle is generated it is reverted back to with(this). vue-loader also uses similar technique.

[deathmaz]

I have the same issue, here my rollup config:

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: 'assets/js/main.js',
    dest: 'dist/js/main.js',
    format: 'iife',
    plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        commonjs(),
        vue({compileTemplate: true}),
        babel(),
    ],
};

Should i change something to make it work?

[znck]

Check out this gist. https://gist.github.com/znck/140d5e9deabfa41f2e935d053a59f23e

It is difficult to reproduce this error. Give me exact version of node, npm and operating system.

[deathmaz]

$ node -v
v6.6.0

$ npm -v
3.10.7

$ ./node_modules/.bin/rollup -v
rollup version 0.36.0

I'm using the latest Manjaro Linux distribution.
System: Kernel: 4.4.21-1-MANJARO x86_64 (64 bit) Desktop: Xfce 4.12.3 Distro: Manjaro Linux

BTW, i tried the configs with vue 2.0.0-rc.7 and here how i imported vue in assets/js/main.js file:
import Vue from 'vue/dist/vue.js';

[94cstyles]

<template>
    <div class="m-lottery-button">
        <a class="lottery-btn" :disabled="busy" v-tap.stop.prevent @tap="start()">{{text}}</a>
        <div class="lottery-count">
            你还有<b>{{join_count}}</b>次抽奖机会
        </div>
    </div>
</template>

compile to

template: "<div class=m-lottery-button><a class=lottery-btn :disabled v-tap.stop.prevent @tap=start()>{{text}}</a><div class=lottery-count>你还有<b>{{join_count}}</b>次抽奖机会</div></div>"

:disabled The value is missing

compileTemplate:false

[znck]

It uses htmlMinifier plugin. See default config: src/options.js

You can override these:

import vue from 'rollup-plugin-vue';

export default {
    plugins: [
        vue({ htmlMinifier: { /* Override default. */} })
    ],
};

[thgh]

You should disable strict mode in Rollup: { useStrict: false } (and keep using compileTemplate: true)

https://github.com/thgh/rollup-plugin-vue2#strict-mode-disabled