When trying to package a Vue component using rollup, an error about an unexpected token from the commonjs plugin keeps popping up:
(plugin commonjs) SyntaxError: Unexpected token https://i.sstatic.net/kJrp3.png
Here is a snippet from the rollup.config.js file:
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";
import {babel} from '@rollup/plugin-babel';
import packageJson from "./package.json";
export default {
input: "src/index.ts",
output: [
{
format: "cjs",
file: packageJson.main,
sourcemap: true
},
{
format: "esm",
file: packageJson.module,
sourcemap: true
}
],
plugins: [babel(), peerDepsExternal(), resolve(), commonjs(), typescript(), vue()]
};
Also, here's a snippet from the button.vue file:
<template>
<button>button</button>
</template>
<script lang="ts">
</script>
Looking for a solution? Well, here's something I discovered:
A more effective way might be to utilize vue-sfc-rollup when packaging Vue components.
Update 2023: These days, Vite has gained popularity and you can leverage Vite Lib mode for packaging Vue components intended for NPM. Check out this starter template that could be of assistance.