Struggling to compile my Vue scripts with rollup. The error I'm facing is
[!] Error: 'openBlock' is not exported by node_modules/vue/dist/vue.runtime.esm.js, imported by src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js
app.js
import Vue from 'vue/dist/vue'
import Buefy from 'buefy'
Vue.use(Buefy)
import ButtonTest from './components/TestButton.vue'
Vue.component('ssm-button', ButtonTest);
var app = new Vue({
el: '#app',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
TestButton.vue
<template>
<div>
asdf
</div>
</template>
<script>
export default {}
</script>
rollup.config.js
'use strict'
const path = require('path')
const { babel } = require('@rollup/plugin-babel')
const banner = require('./banner.js')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
import multi from '@rollup/plugin-multi-entry'
import vuePlugin from 'rollup-plugin-vue'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
let fileDest = 'app.js'
const external = ['jquery']
const plugins = [
vuePlugin(),
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify( 'production' )
}),
babel({
// Only transpile our source code
exclude: 'node_modules/**',
// Include the helpers in the bundle, at most one copy of each
babelHelpers: 'bundled'
}),
nodeResolve(),
multi(),
commonjs(),
]
const globals = {
jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
'popper.js': 'Popper'
}
module.exports = [
{
input: [path.resolve(__dirname, '../js/app.js'), path.resolve(__dirname, '../js/custom.js')],
output: {
banner,
file: path.resolve(__dirname, `../../assets/js/${fileDest}`),
format: 'umd',
globals,
name: 'main-javascript'
},
external,
plugins,
},
]
Tried multiple solutions, but nothing seems to work. When commonjs is loaded before vuePlugin in the config, a different error surfaces
[!] (plugin commonjs) SyntaxError: Unexpected token (2:4) in /Users/xxx/Dev/self-storage-manager/wordpress_data/wp-content/themes/Bulmascores/src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js (2:4) 1: 2: ^ 3: asdf 4:
Any idea what's happening here? Been stuck for two days and need a solution.