{"id":13447,"library":"liferay-npm-bundler-loader-json-loader","title":"Liferay npm Bundler JSON Loader","description":"The `liferay-npm-bundler-loader-json-loader` package, currently at version 2.32.2, is a specialized build-time loader designed for the Liferay npm bundler ecosystem. Its core function is to transform JSON files into standard JavaScript modules, where the content of the JSON file is directly exported as a parsed JavaScript object. This enables developers to seamlessly integrate and import static JSON data within their Liferay frontend projects. As an integral component of the larger `liferay-frontend-projects` monorepo, its release schedule is aligned with broader Liferay frontend tooling updates, which occur frequently, with several related packages seeing multiple updates annually. This loader's key differentiator is its deep integration with Liferay's specific bundling and module resolution mechanisms, providing a tailored solution for Liferay-based development environments, unlike generic JSON loaders used in other bundlers like Webpack or Rollup.","status":"active","version":"2.32.2","language":"javascript","source_language":"en","source_url":"https://github.com/liferay/liferay-frontend-projects","tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-loader-json-loader","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-loader-json-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-loader-json-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package functions as a loader for `liferay-npm-bundler` and requires it for operation.","package":"liferay-npm-bundler","optional":false}],"imports":[{"note":"This package is a `liferay-npm-bundler` loader. It is referenced by its short string name 'json-loader' within the `use` array of build rules in `.npmbundlerrc` files, not through direct JavaScript `import` or `require` statements. Attempting to import it in JS will fail.","wrong":"import jsonLoader from 'liferay-npm-bundler-loader-json-loader';","symbol":"json-loader (config identifier)","correct":"// .npmbundlerrc\n{\n  \"rules\": [\n    {\n      \"test\": \"\\\\.json$\",\n      \"use\": [\"json-loader\"]\n    }\n  ]\n}"},{"note":"The loader's functionality is activated by configuring a rule object directly within the `rules` array of the `.npmbundlerrc` file. There are no exposed JavaScript functions for programmatic configuration of this loader.","wrong":"import { configureJsonLoader } from 'liferay-npm-bundler-loader-json-loader'; configureJsonLoader(...);","symbol":"(Loader rule configuration)","correct":"const bundlerConfig = {\n  \"rules\": [\n    {\n      \"test\": \"\\\\.json$\",\n      \"use\": [\"json-loader\"]\n    }\n  ]\n}; // This configuration object is placed directly into .npmbundlerrc"},{"note":"Developers do not directly call API functions from this package. It operates as a build-time plugin or middleware invoked implicitly by the `liferay-npm-bundler`.","wrong":"require('liferay-npm-bundler-loader-json-loader').runLoader(fileContent);","symbol":"(Loader invocation)","correct":"The `liferay-npm-bundler` automatically applies the configured 'json-loader' when it processes a file matching the 'test' regex (e.g., a '.json' file) during the build process."}],"quickstart":{"code":"{\n  \"rules\": [\n    {\n      \"test\": \"\\\\.json$\",\n      \"use\": [\"json-loader\"]\n    }\n  ]\n}\n\n// To use this loader, place the above JSON configuration into your project's .npmbundlerrc file.\n// Then, in a JavaScript module, you can import JSON files like so:\n// import myData from './path/to/my-data.json';\n// console.log(myData.someProperty);\n","lang":"json","description":"This `.npmbundlerrc` configuration snippet demonstrates how to enable the JSON loader, allowing `.json` files to be imported directly into JavaScript modules within a Liferay project's build process."},"warnings":[{"fix":"Always refer to the official Liferay frontend documentation for recommended versions of core tooling. If issues arise, try updating both the loader and `liferay-npm-bundler` to their latest compatible versions.","message":"This loader is tightly coupled with the `liferay-npm-bundler` build system. Ensure compatibility between the loader version and your `liferay-npm-bundler` version to avoid unexpected build errors or incorrect module transformations.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Do not add `liferay-npm-bundler-loader-json-loader` as a runtime dependency or attempt to import it directly into your application's JavaScript code. It is solely configured via `.npmbundlerrc`.","message":"This package is a build-time asset and does not export any JavaScript modules for direct `import` or `require`. Attempting to import it in your runtime code will lead to module resolution errors or undefined behavior.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add or verify the presence of the JSON loader rule in your project's `.npmbundlerrc` file, ensuring the `test` regex matches your JSON files (e.g., `\"test\": \"\\\\.json$\"`).","cause":"A JSON file was imported into a JavaScript module, but the `liferay-npm-bundler-loader-json-loader` was not correctly configured or enabled in the `.npmbundlerrc` file.","error":"Module parse failed: Unexpected token (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Ensure `liferay-npm-bundler` is correctly installed. The `json-loader` string in `.npmbundlerrc` refers to this specific Liferay-provided loader, and no separate `npm install json-loader` is typically needed for the Liferay ecosystem.","cause":"While `json-loader` is the common name used in the configuration, there might be a mismatch in how `liferay-npm-bundler` resolves or registers its internal loaders, or an external `json-loader` package is incorrectly assumed to be necessary.","error":"Error: Cannot find module 'json-loader' in [...].npmbundlerrc"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}