Rollup Plugin Framework7

1.2.1 verified Mon Apr 27 auth: no javascript

A Rollup and Vite plugin (v1.2.1, actively maintained) for loading Framework7 single-file components (.f7.html, .f7, .f7.js, .f7.jsx). It enables developers to write Framework7 router components in a Vue-like SFC format with template, script, and optional style blocks. Key differentiators: seamless integration with both Rollup and Vite, optional CSS emission, JSX support via Babel or esbuild, and compatibility with Framework7 v6. Releases are infrequent but stable, with minimal breaking changes.

Common errors

error Error: Cannot find module 'rollup-plugin-framework7' ↓

cause Plugin not installed.

fix

Run: npm install rollup-plugin-framework7 --save-dev

error TypeError: framework7 is not a function ↓

cause Using named import instead of default import.

fix

Use import framework7 from 'rollup-plugin-framework7' (no curly braces).

error TypeError: framework7 is not a function ↓

cause CommonJS require returns object with .default property.

fix

Use const framework7 = require('rollup-plugin-framework7').default;

error Error: Unexpected token '<' ↓

cause JSX not configured. Babel plugins missing or not applied.

fix

Install and add @rollup/plugin-babel with @babel/preset-react and @babel/preset-env.

Warnings

deprecated Starting from v2.0.0, the plugin will drop support for Rollup < 3 and Vite < 4. ↓

fix Upgrade to v2.0.0+ when released and ensure Rollup >= 3 and Vite >= 4.

gotcha When using CommonJS require(), the plugin is exported as default, so you must use .default property. ↓

fix Use const framework7 = require('rollup-plugin-framework7').default;

gotcha The plugin does not include CSS bundling; you must add a separate CSS plugin (e.g., rollup-plugin-css) when emitCss: true. ↓

fix Add a CSS plugin to your Rollup configuration: import css from 'rollup-plugin-css'; and include it after framework7.

gotcha JSX components require additional Babel setup. If not configured, JSX will not be transformed. ↓

fix Install @rollup/plugin-babel, @babel/preset-react, @babel/preset-env and add babel() plugin with presets.

Install

npm install rollup-plugin-framework7

yarn add rollup-plugin-framework7

pnpm add rollup-plugin-framework7

Imports

framework7
wrong
```
const framework7 = require('rollup-plugin-framework7')
```
correct
```
import framework7 from 'rollup-plugin-framework7'
```
Default ES import is recommended. CommonJS require works but may cause issues if the plugin uses ESM-only features.
framework7
wrong
```
import { framework7 } from 'rollup-plugin-framework7'
```
correct
```
import framework7 from 'rollup-plugin-framework7'
```
The plugin is exported as default, not a named export. Named import will result in undefined.
framework7
wrong
```
const framework7 = require('rollup-plugin-framework7')
```
correct
```
const framework7 = require('rollup-plugin-framework7').default
```
In CommonJS, the default export is under .default property. Direct require may return an object with default property.

Quickstart

Minimal Rollup configuration using rollup-plugin-framework7 with CSS emission enabled.

// rollup.config.js
import framework7 from 'rollup-plugin-framework7';

export default {
  input: 'src/app.js',
  plugins: [
    framework7({ emitCss: true }),
  ]
};