When packaging a Vue ponent with rollup, this error appears:

(plugin monjs) SyntaxError: Unexpected token

rollup.config.js:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import monjs from "@rollup/plugin-monjs";
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(), monjs(), typescript(), vue()]
};

button.vue:

<template>
  <button>button</button>
</template>
<script lang="ts">
</script>

any solution?

So I found a better way:

It's better to use vue-sfc-rollup to package Vue ponents.

Update 2023: These days Vite is trendy and you can use Vite Lib mode to package Vue ponents for NPM. This is a starter template that may help you.

When packaging a Vue ponent with rollup, this error appears:

(plugin monjs) SyntaxError: Unexpected token

rollup.config.js:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import monjs from "@rollup/plugin-monjs";
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(), monjs(), typescript(), vue()]
};

button.vue:

<template>
  <button>button</button>
</template>
<script lang="ts">
</script>

any solution?

So I found a better way:

It's better to use vue-sfc-rollup to package Vue ponents.

Update 2023: These days Vite is trendy and you can use Vite Lib mode to package Vue ponents for NPM. This is a starter template that may help you.

• javascript
• typescript
• vue.js
• babeljs
• rollupjs

• please share a screenshot of the error – Boussadjra Brahim Commented Jul 7, 2021 at 5:54
• Edited and added screenshot. – Ehsan Commented Jul 7, 2021 at 6:00
• inside the script add import { defineComponent } from 'vue';export default defineComponent({}) or remove the script section – Boussadjra Brahim Commented Jul 7, 2021 at 6:02
• Still the same error. – Ehsan Commented Jul 7, 2021 at 6:05

2 Answers 2

I had a problem like this. Swearing at any html tag in the <template>.

plugins: [
  vue() //should be the first
  babel(),
  peerDepsExternal(),
  resolve(),
  monjs(),
  typescript(),
],

Watch this issue.

The purpose of the monjs plugin is to "convert CommonJS modules to ES6" according to the docs. Assuming you are using ESM in your source code, there's no need transpile your code with the monjs plugin. The exclude option achieves this.

E.g.

plugins: [
  // some plugins here
  monjs({
    exclude: 'src/**',
  }),
  // other plugins here
],

As a side note, the babel plugin should appear after the monjs plugin in the plugins array, as per the docs, which say:

When using @rollup/plugin-babel with @rollup/plugin-monjs in the same Rollup configuration, it's important to note that @rollup/plugin-monjs must be placed before this plugin in the plugins array for the two to work together properly.