0

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?

JRJurman
  • 1,615
  • 2
  • 19
  • 30

1 Answers1

2

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)

Rich Harris
  • 28,091
  • 3
  • 84
  • 99