How To Update Rollup to Version 3

A brief guide to save you time and frustration

Photo by Max Chen on Unsplash

A few days ago, Rollup reached version 3. I updated some of my projects, but it wasn’t a painless operation. There are some changes to the code and some plugins to update. In this article, I report the steps I followed, hoping they can also be useful to someone else.

In this article, I use my repository MEMENTO — Svelte, Typescript & TailwindCSS as an example, but the process is the same for all projects.

First, I check which packages are to be updated with this command:

npx npm-check-updates

This way, I get the list of packages to upgrade.

Now, I update the packages with this command:

npx npm-check-updates -u
npm install

The problems start now. I get the following error messages:

• ERESOLVE overriding peer dependency
• peer rollup@"1 || 2" from rollup-plugin-css-only@3.1.0
• peer rollup@"^2.0.0" from rollup-plugin-terser@7.0.2

They are linked because I have two packages that have version 1 or version 2 rollup dependencies. To fix this, I need to update these two packages. The problem is that, at the moment, the two repositories appear outdated. I made a pull request for both of them with a possible solution. I hope they are updated soon.

In the meantime, I have created two forks with two packages that should solve the problem:

• @el3um4s/rollup-plugin-css-only
• @el3um4s/rollup-plugin-terser

So, I uninstall the two problematic plugins:

npm uninstall rollup-plugin-css-only rollup-plugin-terser

And I replace them with my forks:

npm install @el3um4s/rollup-plugin-css-only @el3um4s/rollup-plugin-terser