Getting error while bundling Vue app with rollup js. CreateElementVNode

Question

Basically, I am building VS code extension using Vue js but bundling the app using rollupjs gives an error.

Node version - 14.18.0

Vue Js Version - 2.6.14

Rollup Version - 2.72.1

rollup.config.js

// @ts-ignore
import vue from "rollup-plugin-vue";
import css from "rollup-plugin-css-only";
import commonjs from "rollup-plugin-commonjs";
import requireContext from "rollup-plugin-require-context";
import { terser } from "rollup-plugin-terser";
import path from "path";
import fs from "fs";

const production = !process.env.ROLLUP_WATCH;
export default fs
  .readdirSync(path.join(__dirname, "web", "pages"))
  .map((input) => {
    const name = input.split(".")[0].toLowerCase();
    return {
      input: `web/pages/${input}`,
      output: {
        sourcemap: false,
        format: "iife",
        name: "app",
        file: `dist-web/${name}.js`,
      },
      plugins: [
        css(),
        vue({
          //@ts-ignore
          dev: !production,
          css: false,
        }),
        commonjs(),

        resolve({
          browser: true,
          dedupe: ["vue"],
        }),
        production && terser(),
      ],
      watch: {
        clearScreen: false,
      },
    };
  });

On building it error console is:-

Answer 1

Due to some features of commonjs(), you can try explicitly indicating the variable export of a file.

for example:

plugins: [ commonjs({
    'namedExports': {
      './lib/main.js': ['__moduleExports']
    }
  })]