Bundle your React app with Rollup.js

4 min readNov 26, 2020

According to Tooling.Report maintained by GoogleChromeLabs , Rollup.js performs better than other bundlers.

In this blog post, we will see how to bundle a React.js app with rollup.js.

Let’s start

Make sure that you have installed a node.js version in your machine. Nvm makes things easier and allows us to have multiple versions of node.js in our machine.

Let’s install the latest stable nodejs version:

nvm install stable 
Now using node v15.3.0 (npm v7.0.14)

Cool! We’re ready to go.

Setup your project:

mkdir react-rollup-app 
cd react-rollup-app 
npm init

The above command will create the initial package.json. We're going to enhance this file later.

package.json

Create the html file which will host your React.js app.

index.html

Open it with your browser:

That’s a good start, but soon or later you’ll need a web server to load other static files such as javascript and css files.

How rollup.js works?

It’s pretty simple:

It takes an input file with your code
It performs some actions to your code based on the provided plugins you gave
It produces one or more output files

Give me a dead simple example

OK, fair! Let’s change the body background colour of our page.

src/index.js

document.body.style.backgroundColor = "yellow";

Install rollup and some plugins for development

Rollup.js comes with a variety of plugins and one of them can play as web server to host all your static files. We will also need another one which reloads the page after each edit of our javascript files.

Install rollup and the above 2 plugins:

npm i rollup rollup-plugin-serve rollup-plugin-livereload --save-dev

Create the rollup configuration file:

rollup.config.dev.js

In our case the output file dist/bunlde.js will be used by our index.html to run the javascript code.

Include it to your index.html file:

index.html

Add the `build:dev` script to package.json

package.json

and run the command npm run build:dev.

This command, will load our yellow page to localhost:3000.

So far, so good. Now it’s time to run some React code.

Setup your React code

Install the react and react-dom libs:

npm i react react-dom

Create your first React component:

src/App.jsx

Edit the src/index.js to run the react code.

src/index.js

Run the build script again:

npm run build:dev

This happens because JSX is not valid JavaScript and must be transpiled to valid JavaScript. Babel is one of the most popular JavaScript tranpilers out there.

Babel also allow us to write modern JavaScript. It converts ES6/ES7 to older versions such as ES5 which are compatible with old browsers.

Install `babel` and the related `react-preset`.

npm i babel @babel/preset-react @rollup/plugin-babel --save-dev

Edit the rollup.config.dev.js

Run again the build script:

npm run build:dev

Error No #2. (!) Unresolved dependencies . The packages react and react-dom cannot be found.

To overcome this issue, we need another rollup plugin. The @rollup/plugin-node-resolve.

npm i @rollup/plugin-node-resolve --save-dev

add it to rollup.config.dev.js:

Run again the build script:

npm run build:dev

Error No #3, name exports, this time. Let’s fix it.

For this we need the @rollup/plugin-commonjs plugin which converts CommonJS modules to ES6.

npm i @rollup/plugin-commonjs --save-dev

add it to rollup.config.dev.js:

Let’s run the build script again:

npm run build:dev

The build was successful. But, there’s a last error in the page.

Error No #4, Uncaught ReferenceError: process is not defined. In order to fix this issue, we need a last plugin. The @rollup/plugin-replace which replaces strings in files while bundling.

npm i @rollup/plugin-replace --save-dev

Include it to the rollup config file:

rollup.config.dev.js

Let’s run the build script again:

npm run build:dev