Giter Club home page Giter Club logo

Comments (11)

thgh avatar thgh commented on May 18, 2024 2

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

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

from rollup-plugin-vue.

znck avatar znck commented on May 18, 2024

Share steps to reproduce the error!

from rollup-plugin-vue.

94cstyles avatar 94cstyles commented on May 18, 2024
<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

from rollup-plugin-vue.

znck avatar znck commented on May 18, 2024

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

from rollup-plugin-vue.

94cstyles avatar 94cstyles commented on May 18, 2024

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

from rollup-plugin-vue.

znck avatar znck commented on May 18, 2024

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.

from rollup-plugin-vue.

deathmaz avatar deathmaz commented on May 18, 2024

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?

from rollup-plugin-vue.

znck avatar znck commented on May 18, 2024

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.

from rollup-plugin-vue.

deathmaz avatar deathmaz commented on May 18, 2024
$ 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';

from rollup-plugin-vue.

94cstyles avatar 94cstyles commented on May 18, 2024
<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

from rollup-plugin-vue.

znck avatar znck commented on May 18, 2024

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. */} })
    ],
};

from rollup-plugin-vue.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.