buble-react-rollup-starter

7.0.0 verified Mon Apr 27 auth: no javascript maintenance

A boilerplate for building web apps with React, Bublé (a fast ES2015 compiler) and Rollup (tree-shaking bundler). v7.0.0 (latest) updates dependencies. This starter provides a minimal setup with Browsersync for live reloading, StandardJS linting, and separate dev/production builds. It targets modern JavaScript and is not actively maintained, last updated in 2017. Key differentiators: uses Bublé instead of Babel for faster compilation, and Rollup for tree-shaking output.

Common errors

error Error: Cannot find module 'react' ↓

cause Missing dependency installation.

fix

Run npm install or npm install react react-dom.

error Error: Unexpected token (1:16) - You may need an appropriate loader to handle this file type. ↓

cause Bublé not configured or missing plugin for JSX.

fix

Add buble plugin with jsx option in rollup.config.js.

error Error: 'DummyComponent' is not exported from './components/dummy-component' ↓

cause Import path missing .jsx extension.

fix

Change import to include .jsx: './components/dummy-component.jsx'

Warnings

deprecated The package has not been updated since 2017; dependencies like React 15 may have breaking changes with newer versions. ↓

fix Use a more modern starter like create-react-app or Vite-based templates.

gotcha Bublé does not support JSX natively; you must use a Bublé plugin or custom transform. ↓

fix Ensure your Rollup config includes buble() plugin and JSX settings: plugins: [buble({ jsx: 'h' })]

gotcha The boilerplate uses StandardJS style; if you use semicolons or different formatting, linter will fail. ↓

fix Adjust your code to StandardJS style or disable the linter in package.json.

gotcha Rollup configuration requires .jsx file extensions; omitting them will cause module not found. ↓

fix Always use .jsx extension for files containing JSX in imports.

Install

npm install buble-react-rollup-starter

yarn add buble-react-rollup-starter

pnpm add buble-react-rollup-starter

Imports

React
wrong
```
const React = require('react')
```
correct
```
import React from 'react'
```
CommonJS require works but ESM is preferred for tree-shaking.

ReactDOM

wrong

const ReactDOM = require('react-dom')

correct

import ReactDOM from 'react-dom'

ESM import for ReactDOM.

DummyComponent

wrong

import DummyComponent from './components/dummy-component'

correct

import { DummyComponent } from './components/dummy-component.jsx'

Named export, not default. Include .jsx extension for Rollup.

Quickstart

Install the boilerplate, write a simple React app with a component, and run dev/production builds.

// Installation
npm install buble-react-rollup-starter

// Then create src/index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { DummyComponent } from './components/dummy-component.jsx'

const root = document.querySelector('main')
ReactDOM.render(<DummyComponent />, root)

// Run development server with live reload:
npm start

// For production build:
npm run build