{"id":28148,"library":"riot-tag-loader","title":"Riot Tag Loader","description":"Webpack loader for compiling Riot.js tag files (.tag). The official loader maintained by the Riot team. Current stable version is v9.0.1, with v10.0.0 in alpha requiring Riot v10 and Node >=22. Handles parsing of Riot tags into JavaScript modules, supports hot module replacement via riot-hot-reload, and offers sourcemap configuration. Key differentiator: tightly coupled with riot-compiler, supports webpack 5, ESM-first from v9. Breaking changes: dropped webpack <=4 and Node <18 in v9, migrated from CJS to ESM. Release cadence: major version bumps with Riot compiler releases.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/riot/tag-loader","tags":["javascript","webpack","riot","loader"],"install":[{"cmd":"npm install riot-tag-loader","lang":"bash","label":"npm"},{"cmd":"yarn add riot-tag-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add riot-tag-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required to compile Riot tags","package":"riot-compiler","optional":false},{"reason":"Optional dependency for hot module replacement support","package":"riot-hot-reload","optional":true}],"imports":[{"note":"ESM-only since v9; CJS require() will fail. Use dynamic import if needed.","wrong":"const riotTagLoader = require('riot-tag-loader')","symbol":"default (loader)","correct":"import riotTagLoader from 'riot-tag-loader'"},{"note":"webpack >=4 uses rules and use array, not loaders object. The old syntax works only for webpack <=3.","wrong":"module.exports = { module: { loaders: [ { test: /\\.tag$/, loader: 'riot-tag-loader' } ] } }","symbol":"webpack config (module.rules)","correct":"module.exports = { module: { rules: [ { test: /\\.tag$/, use: ['riot-tag-loader'] } ] } }"},{"note":"Must be imported after riot to augment the riot API with riot.reload(). Only needed if HMR is enabled.","wrong":"import riot from 'riot'; import 'riot-hot-reload'; // correct but must be after riot import","symbol":"hot reload import","correct":"import 'riot-hot-reload'"}],"quickstart":{"code":"// webpack.config.js\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\nexport default {\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.tag$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: 'riot-tag-loader',\n            options: { hot: false }\n          }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Shows a minimal webpack 5 configuration using riot-tag-loader with ESM syntax, targeting .tag files."},"warnings":[{"fix":"Upgrade Node to version 22 or later.","message":"v10 drops support for Node <22. Ensure your Node version is >=22.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Upgrade webpack to version 5.","message":"v9 drops support for webpack <=4. Use webpack 5 or later.","severity":"breaking","affected_versions":">=9.0.0 <10.0.0"},{"fix":"Use import syntax or dynamic import. If you must use CJS, stick to v8.x.","message":"v9 migrates from CommonJS to ESM. require('riot-tag-loader') will fail.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Install riot-compiler@^6.0.0 alongside.","message":"v6 requires riot-compiler v6. Compatible compiler version must match loader major version.","severity":"breaking","affected_versions":">=6.0.0 <7.0.0"},{"fix":"Set hot: false in loader options unless you have installed and imported riot-hot-reload.","message":"The 'hot' option must be false if you are not using HMR. Setting it to true without riot-hot-reload causes errors.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run npm install riot-compiler --save-dev.","cause":"Missing peer dependency riot-compiler is not installed.","error":"Error: Cannot find module 'riot-compiler'"},{"fix":"Add a rule in webpack config: { test: /\\.tag$/, use: ['riot-tag-loader'] }.","cause":"webpack is not configured to use riot-tag-loader for .tag files.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Use import statement instead of require().","cause":"Using CJS require() with ESM-only v9+ of riot-tag-loader.","error":"export default ... is not a function or cannot be resolved"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}