Error when compiling javascript with Vue using Rollup

Question

I'm having issues trying to compile my Vue scripts with rollup. The error I'm getting 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 https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

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,
  },
]

I've tried a lot of different things, but nothing seems to help. However, if I load commonjs before vuePlugin in the config, I get a different error

[!] (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:

Does anybody have an idea of what is going on? I've been working on this for the past two days now and really can't seem to find a solution.

Answer 1

Finally found a solution

I changed the rollup vue plugin from @rollup/plugin-vue to rollup-plugin-vue2 https://github.com/thgh/rollup-plugin-vue2 and now it works.