Registry / devops / react-build-info

react-build-info

library0.0.3jsnpmunverified

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.

devops

npm install react-build-info

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-BUILD-INFO

react-build-info

devopsjavascriptv0.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

buildInfo

✓ import { buildInfo } from './buildInfo';

✗ import buildInfo from './buildInfo';

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.

React

✓ import React from 'react';

Standard React library import, foundational for using React components.

BuildInfoType

✓ type BuildInfoType = { buildVersion: string; buildDate: number; };

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.

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.

import React from 'react'; import { buildInfo } from './buildInfo'; // Correct import for named export import './App.css'; // Assuming standard React app structure const buildDate = new Date(buildInfo.buildDate); class App extends React.Component { componentDidMount() { console.log(`Application Build Number: ${buildInfo.buildVersion}`); console.log(`Application Build Date: ${buildDate.toLocaleString()}`); // You could also send this info to an analytics service or display it in a footer } render() { return ( <div className="App"> <header className="App-header"> <h1>My Application</h1> <p>Version: {buildInfo.buildVersion}</p> <p>Built On: {buildDate.toLocaleDateString()} {buildDate.toLocaleTimeString()}</p> </header> <main> <p>Welcome to the app!</p> </main> <footer> <p>Powered by React</p> </footer> </div> ); } } export default App;

Debug

Known issues

gotchaManual 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.

fix

Modify your `package.json` scripts: `"build": "npm version patch && react-build-info && react-scripts build"`

affects: >=0.0.1

gotchaVersion 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.

fix

Always prepend version increment commands: `"build": "npm version patch && react-build-info && react-scripts build"`

affects: >=0.0.1

breakingIncorrect 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.

fix

Use named import syntax: `import { buildInfo } from './buildInfo';`

affects: >=0.0.1

gotchaFile 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.

fix

Treat `src/buildInfo.ts` as an autogenerated file. Any custom build info should be handled through other means or by extending the tool.

affects: >=0.0.1

Errors

Common errors & fixes

Module not found: Can't resolve './buildInfo' in '...' or similar compilation error related to missing 'buildInfo' file.

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.

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.

TypeError: Cannot read properties of undefined (reading 'buildVersion') or 'buildInfo' is undefined.

This typically occurs when `buildInfo` is imported incorrectly as a default export, or the generated file is empty/malformed.

fix

Verify that `src/buildInfo.ts` was generated correctly. Most importantly, ensure you are using a named import: `import { buildInfo } from './buildInfo';`

Upgrade

Version history

0.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/johnwargo/react-build-info ↗

packagehttps://www.npmjs.com/package/react-build-info ↗