{"id":15781,"library":"react-build-info","title":"React Build Info Generator","description":"react-build-info is a development utility designed for React projects to automatically inject build-time metadata into the application. It reads the project's `package.json` file to extract the `version` and combines it with the current date/time to generate a `src/buildInfo.ts` (or `.js`) file. This file contains an exported constant `buildInfo` with `buildVersion` and `buildDate` properties, making build information easily accessible within the React application for debugging, support, or display purposes. The current stable version is `0.0.3`. This package is a low-churn utility, receiving updates primarily as needed to maintain compatibility or address specific issues. Its key differentiator is its simplicity and direct file generation approach, avoiding the overhead of more complex build tool plugins.","status":"active","version":"0.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/johnwargo/react-build-info","tags":["javascript","React"],"install":[{"cmd":"npm install react-build-info","lang":"bash","label":"npm"},{"cmd":"yarn add react-build-info","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-build-info","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `react-build-info` tool generates a file (e.g., `src/buildInfo.ts`) that exports `buildInfo` as a named constant, not a default export. Using a default import will result in `buildInfo` being undefined.","wrong":"import buildInfo from './buildInfo';","symbol":"buildInfo","correct":"import { buildInfo } from './buildInfo';"},{"note":"Standard React library import, foundational for using React components.","symbol":"React","correct":"import React from 'react';"},{"note":"While `react-build-info` generates a `.ts` file, it doesn't export a type definition directly. Consumers typically infer the type or define it manually based on the generated object structure for stronger TypeScript guarantees.","symbol":"BuildInfoType","correct":"type BuildInfoType = { buildVersion: string; buildDate: number; };"}],"quickstart":{"code":"import React from 'react';\nimport { buildInfo } from './buildInfo'; // Correct import for named export\n\nimport './App.css'; // Assuming standard React app structure\n\nconst buildDate = new Date(buildInfo.buildDate);\n\nclass App extends React.Component {\n\n  componentDidMount() {\n    console.log(`Application Build Number: ${buildInfo.buildVersion}`);\n    console.log(`Application Build Date: ${buildDate.toLocaleString()}`);\n    // You could also send this info to an analytics service or display it in a footer\n  }\n\n  render() {\n    return (\n      <div className=\"App\">\n        <header className=\"App-header\">\n          <h1>My Application</h1>\n          <p>Version: {buildInfo.buildVersion}</p>\n          <p>Built On: {buildDate.toLocaleDateString()} {buildDate.toLocaleTimeString()}</p>\n        </header>        \n        <main>\n          <p>Welcome to the app!</p>\n        </main>\n        <footer>\n          <p>Powered by React</p>\n        </footer>\n      </div>\n    );\n  }\n}\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to integrate `react-build-info` into your React project's `package.json` build script and then consume the generated build information within a React component. This setup ensures that your application always displays the correct version and build timestamp, which is invaluable for debugging and support. Remember to add `\"build\": \"npm version patch && react-build-info && react-scripts build\"` to your `package.json` scripts section."},"warnings":[{"fix":"Modify your `package.json` scripts: `\"build\": \"npm version patch && react-build-info && react-scripts build\"`","message":"Manual Integration Required: The `react-build-info` tool does not automatically run. You must manually add it to your project's `package.json` build script or another appropriate lifecycle hook to ensure `src/buildInfo.ts` is generated/updated before your main application build.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always prepend version increment commands: `\"build\": \"npm version patch && react-build-info && react-scripts build\"`","message":"Version Increment Dependency: To ensure `buildVersion` reflects a new version, the `npm version patch` (or `minor`, `major`) command must be executed *before* `react-build-info` in your build script. Without it, `react-build-info` will use the existing `package.json` version.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use named import syntax: `import { buildInfo } from './buildInfo';`","message":"Incorrect Import Syntax: The generated `src/buildInfo.ts` file exports `buildInfo` as a named constant (`export const buildInfo = { ... }`). Attempting to import it as a default export (`import buildInfo from './buildInfo';`) will result in `buildInfo` being `undefined` or a module resolution error.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Treat `src/buildInfo.ts` as an autogenerated file. Any custom build info should be handled through other means or by extending the tool.","message":"File Overwriting: The `react-build-info` command overwrites the `src/buildInfo.ts` (or `.js`) file every time it runs. Do not manually edit this file as your changes will be lost on the next build.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `react-build-info` is correctly integrated into your `package.json` build script (e.g., `\"build\": \"react-build-info && react-scripts build\"`) and runs successfully.","cause":"The `react-build-info` command was not executed, or it failed, leading to the `src/buildInfo.ts` file not being generated before the application build process started.","error":"Module not found: Can't resolve './buildInfo' in '...' or similar compilation error related to missing 'buildInfo' file."},{"fix":"Verify that `src/buildInfo.ts` was generated correctly. Most importantly, ensure you are using a named import: `import { buildInfo } from './buildInfo';`","cause":"This typically occurs when `buildInfo` is imported incorrectly as a default export, or the generated file is empty/malformed.","error":"TypeError: Cannot read properties of undefined (reading 'buildVersion') or 'buildInfo' is undefined."}],"ecosystem":"npm"}