Registry / web-framework / rollup-plugin-framework7

rollup-plugin-framework7

library1.2.1jsnpmunverified

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.

web-framework

npm install rollup-plugin-framework7

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-FRAM

rollup-plugin-framework7

web-frameworkjavascriptv1.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

framework7

✓ import framework7 from 'rollup-plugin-framework7'

✗ const framework7 = require('rollup-plugin-framework7')

Default ES import is recommended. CommonJS require works but may cause issues if the plugin uses ESM-only features.

framework7

✓ import framework7 from 'rollup-plugin-framework7'

✗ import { framework7 } from 'rollup-plugin-framework7'

The plugin is exported as default, not a named export. Named import will result in undefined.

framework7

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

✗ const framework7 = require('rollup-plugin-framework7')

In CommonJS, the default export is under .default property. Direct require may return an object with default property.

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 }), ] };

Debug

Known issues

deprecatedStarting 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.

affects: <=1.2.1

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

fix

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

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaJSX 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Plugin not installed.

fix

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

TypeError: framework7 is not a function

Using named import instead of default import.

fix

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

TypeError: framework7 is not a function

CommonJS require returns object with .default property.

fix

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

Error: Unexpected token '<'

JSX not configured. Babel plugins missing or not applied.

fix

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

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

@rollup/plugin-babeloptionalRequired for JSX component processing in Rollup

@babel/preset-reactoptionalNeeded with @rollup/plugin-babel for JSX transformation

@babel/preset-envoptionalRequired with @rollup/plugin-babel for modern JS transpilation

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/framework7io/rollup-plugin-framework7 ↗

packagehttps://www.npmjs.com/package/rollup-plugin-framework7 ↗

homepagehttps://framework7.io ↗