{"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,"search_vec":"'18':79 '22':34 '4':76 '5':66 'alpha':28 'break':72 'bump':91 'cadenc':88 'chang':73 'cjs':84 'compil':7,63,94 'configur':55 'coupl':59 'current':20 'differenti':57 'drop':74 'esm':68,86 'esm-first':67 'file':10 'first':69 'handl':35 'hot':44,50 'javascript':41,96 'key':56 'loader':3,5,14,99 'maintain':15 'major':89 'migrat':82 'modul':42,45 'node':33,78 'offer':53 'offici':13 'pars':36 'releas':87,95 'reload':51 'replac':46 'requir':29 'riot':1,18,30,38,49,62,93,98 'riot-compil':61 'riot-hot-reload':48 'riot.js':8 'sourcemap':54 'stabl':21 'support':43,64 'tag':2,9,11,39 'team':19 'tight':58 'v10':31 'v10.0.0':26 'v9':71,81 'v9.0.1':24 'version':22,90 'via':47 'webpack':4,65,75,97","created_at":"2026-05-09T05:53:58.812274+00:00","updated_at":"2026-05-09T05:53:58.812274+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://riot.js.org","github":"https://github.com/riot/tag-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/riot-tag-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-09","next_check":"2026-08-07","install_tag":null}}