← Go Back

Rollup Class Properties Transform Babel Plugin Issue

Broken Post? → Let me know

I have an NPM library, calendar-dates built with RollUp.JS ("RollUp" hereafter). As I was using an experimental JavaScript feature, Class properties transform (to declare a static property in an ES6 class) with RollUp, I ran into the following error 🙅.

[!] (commonjs plugin) SyntaxError: Unexpected token

$ rollup -c
src/index.js → dist/calendardates.cjs.js, dist/calendardates.esm.js...
[!] (commonjs plugin) SyntaxError: Unexpected token (8:20) in c:\misc\sources\Github\throwaway.CalendarDates\src\index.js
src\index.js (8:20)
6: // 4. getDateMatrixWithMetadataAsync
7:
8: static monthTypes = {
^
9: PREVIOUS: "previous",
10: CURRENT: "current",
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c rollup -c
Directory: c:\\misc\\sources\\Github\\throwaway.CalendarDates
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\misc\\sources\\Github\\throwaway.CalendarDates\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
view raw error.cmd hosted with ❤ by GitHub

I'll show you what I did and how I fixed the error. (I will assume that you are familiar with static class properties in ES6 and RollUp)

🤔 What I did before getting the error

My main class CalendarDates is declared with the static property, monthTypes, which caused the error in the introduction.

class CalendarDates {
static monthTypes = {
PREVIOUS: "previous",
CURRENT: "current",
NEXT: "next"
};
getDates() {
...
}
...
}
view raw CalendarDates.js hosted with ❤ by GitHub

I installed the Class properties transform Babel plugin to the project as a devdependency.

yarn add --dev babel-plugin-transform-class-properties
view raw yarn yarn add --dev babel-plugin-transform-class-properties hosted with ❤ by GitHub

And added transform-class-properties plugin in .babelrc file.

{
"presets": [["env", { "modules": false }]],
"plugins": ["external-helpers", "transform-class-properties"]
}
view raw .babelrc hosted with ❤ by GitHub

Below was my original rollup.config.js file.

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import uglify from "rollup-plugin-uglify";
export default {
input: "src/index.js",
output: [
{
file: "dist/calendardates.cjs.js",
format: "cjs",
name: "calendar-dates"
},
{
file: "dist/calendardates.esm.js",
format: "es",
name: "calendar-dates"
}
],
plugins: [
resolve(),
commonjs(),
uglify(),
babel({
exclude: "node_modules/**"
})
]
};
view raw rollup-config.js hosted with ❤ by GitHub

The configuration takes src/index.js file as an input then

  1. Resolves package (resolve())
  2. Converts CommonJS to ES6 (commonjs())
  3. Minimize the package (uglify())
  4. Converts ES6 to ES5 (babel())

Lastly, outputs two files

  1. calendardates.cjs.js - Common JS module - Enables the library to be imported using require()
  2. calendardates.esm.js - ES6 module - Enables the library to be imported using import()

The logic above worked until I added Class transform properties plugin.

⛏️ How I Fixed It

It turns out that my logic was half-right.

What I had to do  was to transpile (with Babel) before piping the code into commonjs().

// From
plugins: [
resolve(),
commonjs(),
uglify(),
babel({
exclude: "node_modules/**"
})
]
// To
plugins: [
resolve(),
babel({
exclude: "node_modules/**"
}),
commonjs(),
uglify()
]
view raw rollup.config.js hosted with ❤ by GitHub

Basically Babel converts ES6 code into ES5 and then commonjs() converts that ES5 back to ES6 so that the library can be import'ed in ES6 code. The order of how plugins are added matters!

Here is the result after the change.

> yarn build
yarn run v1.5.1
$ rollup -c
src/index.js → dist/calendardates.cjs.js, dist/calendardates.esm.js...
created dist/calendardates.cjs.js, dist/calendardates.esm.js in 1.5s
Done in 3.50s.
view raw success.cmd hosted with ❤ by GitHub

I hope you were making 😁 if you were having a similar issue.

🎐 Parting Words

Yeah, it was as simple as just moving plugin methods around. Learned something new that the order of plugin declaration mattered.

I only guessed to change the order around as I was used to using middlewares in ASP.NET Core, and Express. It seems like many programming concepts can be found in many places and can be used.

Here is the link to the updated rollup.config.js.