Rollup React NPM

1.1.23 verified Mon Apr 27 auth: no javascript

A boilerplate for building React components with Rollup and publishing to npm. Version 1.1.23 requires React 16.2+, lodash 4.17+, and antd 3.1+. It provides a minimal setup with Babel transpilation and a single default export. Alternative to create-react-library and nwb.

Common errors

error TypeError: Cannot read property '...' of undefined ↓

cause Using named import instead of default import.

fix

Use import MyComponent from 'rollup-react-npm' (no braces).

error Error: Module ".../node_modules/antd/lib/..." does not provide a default export ↓

cause Missing antd CSS import or antd version mismatch.

fix

Ensure antd CSS is imported and antd 3.x is installed.

Warnings

deprecated This package has not been updated since 2019 and relies on React 16.2. ↓

fix Migrate to a modern React component library or update the boilerplate.

gotcha Only default export is available; named imports will result in undefined. ↓

fix Use import MyComponent from '...' instead of destructuring.

gotcha Missing antd CSS import will cause components to render without styles. ↓

fix Add import 'antd/dist/antd.css' in your entry file.

Install

npm install rollup-react-npm

yarn add rollup-react-npm

pnpm add rollup-react-npm

Imports

default

wrong

import { MyComponent } from 'rollup-react-npm'

correct

import MyComponent from 'rollup-react-npm'

Only default export is provided; named export will be undefined.

MyComponent

wrong

const MyComponent = require('rollup-react-npm')

correct

const MyComponent = require('rollup-react-npm').default

CommonJS require does not unwrap default; must access .default.

Quickstart

Basic usage: import default component from the package and render it. Note that antd CSS must be imported separately.

import MyComponent from 'rollup-react-npm'
import 'antd/dist/antd.css' // required for antd styles

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  )
}

export default App