CODEWITHSUNDEEP
javascriptnode.jsreactjspackage.jsonrollupjs
JRJurman
JRJurman

Reputation: 1738

Using node modules with Rollup to build web client

I'm trying to build a react application using rollup instead of browserify and babel. I realize I need to use the rollup-plugin-babel to transpile jsx, but when I tell rollup the format is iife, the final page loads with an error:

Uncaught ReferenceError: React is not defined

What do I need to add to the rollup.config.js to include the node modules I've installed in package.json in my final build?

Upvotes: 0

Views: 1833

Answers (1)

Rich Harris
Rich Harris

Reputation: 29615

Two options:

  1. Include React as a separate <script> tag before your app bundle
  2. Include rollup-plugin-node-resolve in your config file, to pull in dependencies from your node_modules folder.

If you take the second route you'll also need rollup-plugin-commonjs (to convert the CommonJS module into an ES module). I think you would also need to add import * as React from 'react' to each module that contained JSX, otherwise you'll continue to get the ReferenceError.

Note: you might be able to use rollup-plugin-buble to transpile JSX. It's similar to the Babel plugin but much faster (though it doesn't transpile every ES2015 feature)

Upvotes: 2

Related Questions