Comments (11)
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.
Share steps to reproduce the error!
from rollup-plugin-vue.
<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.
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.
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.
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.
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.
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.
$ 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.
<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.
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)
- ESM output of vue class components not tree-shakeable in webpack HOT 2
- Option to ignore <Style> completely HOT 1
- Can we process generated string?
- __file property is being exposed no matter what the value of the exposeFilename option is HOT 1
- inject CSS in shadowdom on v6 of the plugin
- Unable to extract transformed CSS HOT 1
- @vue/runtime-dom is not resolved HOT 2
- Component packaging using setup syntax is not supported, logical decomposition of setup HOT 1
- Component packaging using setup syntax is not supported, logical decomposition of setup
- Seems this doesn not work with Vue 3 HOT 1
- [!] (plugin vue) TypeError: Cannot read property 'refSugar' of undefined HOT 4
- TSX Can not be built with Rollup (Vue 3) HOT 1
- Error: v-model can only be used on <input>, <textarea> and <select> elements. HOT 1
- v-model can only be used on <input>, <textarea> and <select> elements. HOT 1
- Bump rollup-plugin-postcss to v4
- Fail to add the attribute scope id "v-data-xxx" when mounting a rollup vue2 component HOT 1
- TypeError at build for example Typescript project w/ latest packages HOT 1
- Cant import javascript or other vue files into vue single file components
- generated files cannot be used in vue-cli when use the composition api in a separate file while in vite project there is no error HOT 1
- rollup-plugin-vue@next error handle not compatible with @vue/[email protected]
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rollup-plugin-vue.