React Build Info Generator

0.0.3 · active · verified Tue Apr 21

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.

Common errors

```
Module not found: Can't resolve './buildInfo' in '...' or similar compilation error related to missing 'buildInfo' file.
```
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.

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.
```
cause 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';`

Warnings

gotcha 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.
Fix: Modify your `package.json` scripts: `"build": "npm version patch && react-build-info && react-scripts build"`
gotcha 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.
Fix: Always prepend version increment commands: `"build": "npm version patch && react-build-info && react-scripts build"`
breaking 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.
Fix: Use named import syntax: `import { buildInfo } from './buildInfo';`
gotcha 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.
Fix: Treat `src/buildInfo.ts` as an autogenerated file. Any custom build info should be handled through other means or by extending the tool.

Install

npm install react-build-info npm
yarn add react-build-info yarn
pnpm add react-build-info pnpm

Imports

buildInfo
wrong:
```
import buildInfo from './buildInfo';
```
correct:
```
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.

Quickstart

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;

view raw JSON →