Rollup Vue2 – build fails

  javascript, rollup, rollupjs, vue.js, vuejs2

I got an issue with my rollup + vue 2 setup, and get conflicting information online.
My rollup config:

import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss';
import sass from 'rollup-plugin-sass';
import image from '@rollup/plugin-image';
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

const plugins = [
    vue({
        preprocessStyles: true,
        css: true,
        compileTemplate: true
    }),
    commonjs({ extensions: ['.js'] }),
    postcss(),
    sass(),
    image(),
    resolve({
        jsnext: true,
        main: true,
        browser: true
    }),
    babel({ exclude: 'node_modules/**', include: '**/*.js' })
];

export default {
    input: 'src/main.js',
    output: {
        dir: 'diss',
        format: 'iife',
        sourcemap: false
    },
    plugins
};

With this config I get the following error:

[!] Error: 'resolveComponent' is not exported by node_modulesvuedistvue.runtime.esm.js, imported by srcApp.vue?vue&type=template&id=7ba5bd90&lang.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
srcApp.vue?vue&type=template&id=7ba5bd90&lang.js (1:9)
1: import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
            ^
2: var _hoisted_1 = {
3:   id: "app"
Error: 'resolveComponent' is not exported by node_modulesvuedistvue.runtime.esm.js, imported by srcApp.vue?vue&type=template&id=7ba5bd90&lang.js

If I switch commonjs with vue in the plugin list, since plugin order matters, I get this error:

[!] (plugin commonjs) SyntaxError: Unexpected token (2:1) in D:current_projectsuploadportalclientsrcApp.vue?vue&type=template&id=7ba5bd90&lang.js
srcApp.vue?vue&type=template&id=7ba5bd90&lang.js (2:1)
1:
2:   <div id="app">
     ^
3:     <router-view />
4:   </div>
SyntaxError: Unexpected token (2:1) in D:current_projectsuploadportalclientsrcApp.vue?vue&type=template&id=7ba5bd90&lang.js

It seems like I miss something in the process, but my research went into rabbit holes without any solution.
Can someone see my error?
Thank you!

Source: Ask Javascript Questions

LEAVE A COMMENT