{"id":22034,"library":"rollup-plugin-framework7","title":"Rollup Plugin Framework7","description":"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.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/framework7io/rollup-plugin-framework7","tags":["javascript"],"install":[{"cmd":"npm install rollup-plugin-framework7","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-framework7","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-framework7","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for JSX component processing in Rollup","package":"@rollup/plugin-babel","optional":true},{"reason":"Needed with @rollup/plugin-babel for JSX transformation","package":"@babel/preset-react","optional":true},{"reason":"Required with @rollup/plugin-babel for modern JS transpilation","package":"@babel/preset-env","optional":true}],"imports":[{"note":"Default ES import is recommended. CommonJS require works but may cause issues if the plugin uses ESM-only features.","wrong":"const framework7 = require('rollup-plugin-framework7')","symbol":"framework7","correct":"import framework7 from 'rollup-plugin-framework7'"},{"note":"The plugin is exported as default, not a named export. Named import will result in undefined.","wrong":"import { framework7 } from 'rollup-plugin-framework7'","symbol":"framework7","correct":"import framework7 from 'rollup-plugin-framework7'"},{"note":"In CommonJS, the default export is under .default property. Direct require may return an object with default property.","wrong":"const framework7 = require('rollup-plugin-framework7')","symbol":"framework7","correct":"const framework7 = require('rollup-plugin-framework7').default"}],"quickstart":{"code":"// rollup.config.js\nimport framework7 from 'rollup-plugin-framework7';\n\nexport default {\n  input: 'src/app.js',\n  plugins: [\n    framework7({ emitCss: true }),\n  ]\n};","lang":"javascript","description":"Minimal Rollup configuration using rollup-plugin-framework7 with CSS emission enabled."},"warnings":[{"fix":"Upgrade to v2.0.0+ when released and ensure Rollup >= 3 and Vite >= 4.","message":"Starting from v2.0.0, the plugin will drop support for Rollup < 3 and Vite < 4.","severity":"deprecated","affected_versions":"<=1.2.1"},{"fix":"Use const framework7 = require('rollup-plugin-framework7').default;","message":"When using CommonJS require(), the plugin is exported as default, so you must use .default property.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a CSS plugin to your Rollup configuration: import css from 'rollup-plugin-css'; and include it after framework7.","message":"The plugin does not include CSS bundling; you must add a separate CSS plugin (e.g., rollup-plugin-css) when emitCss: true.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install @rollup/plugin-babel, @babel/preset-react, @babel/preset-env and add babel() plugin with presets.","message":"JSX components require additional Babel setup. If not configured, JSX will not be transformed.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: npm install rollup-plugin-framework7 --save-dev","cause":"Plugin not installed.","error":"Error: Cannot find module 'rollup-plugin-framework7'"},{"fix":"Use import framework7 from 'rollup-plugin-framework7' (no curly braces).","cause":"Using named import instead of default import.","error":"TypeError: framework7 is not a function"},{"fix":"Use const framework7 = require('rollup-plugin-framework7').default;","cause":"CommonJS require returns object with .default property.","error":"TypeError: framework7 is not a function"},{"fix":"Install and add @rollup/plugin-babel with @babel/preset-react and @babel/preset-env.","cause":"JSX not configured. Babel plugins missing or not applied.","error":"Error: Unexpected token '<'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}