Troubleshooting Bryntum Grid with React

Version requirements

Minimum supported:

• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• Vite 5.0.0 or higher (for application build with Vite)

Installing, building or running

If you encounter issues with installing or building your application, they can often be resolved by clearing the npm cache for the project and global npm packages.

Optionally first clean the global npm/yarn cache:

npm

npm cache clean --force

yarn

yarn cache clean

Run the following commands in your application folder to remove installed packages and reinstall all project dependencies:

rm -rf node_modules
rm package-lock.json
npm install

rm -rf node_modules
rm package-lock.json
yarn install

The Bryntum Grid bundle was loaded multiple times

The Bryntum Grid bundle was loaded multiple times by the application.

The error above usually means that somewhere you have imported both the module and UMD versions of the Bryntum Grid package. Inspect the code and import from a single version of the Bryntum Grid bundle. We recommend using the default module of the @bryntum/grid package (points to the module bundle):

import { Grid } from '@bryntum/grid';

For more information on other causes of the error, please see this guide.

Vite application

Optimize dependencies

When using Vite with React to run a Bryntum application in development mode (npm run dev), in order to fix loading bundles multiple times and avoid runtime error, it is recommended to include Bryntum packages in the optimizeDeps in vite.config.js as shown below.

vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins      : [react()],
    optimizeDeps : {
        include : ['@bryntum/grid', '@bryntum/grid-react']
    }
});

Circular dependencies

During a Vite Rollup production build with Bryntum thin packages, you may see "Circular dependency" warnings. This occurs because the Bryntum API relies on the ES6 specification, which permits certain circular dependencies.

To suppress these warnings, configure your Vite application build as shown below. For more information, refer to the Rollup documentation.

Example vite.config.ts or vite.config.mts file:

// https://vitejs.dev/config/
export default defineConfig({
    build        : {
        rollupOptions : {
            onLog(level, log, handler) {
                if (log.code === 'CIRCULAR_DEPENDENCY') {
                    return; // Ignore circular dependency warnings
                }
            }
        }
    }
});

JavaScript heap out of memory

"JavaScript heap out of memory" error occurs on large projects where the default amount of memory allocated by node is not sufficient to complete the command successfully.

You can increase this amount by running the following command:

For Linux/macOS:

export NODE_OPTIONS=--max-old-space-size=8192

For Windows powershell:

$env:NODE_OPTIONS="--max-old-space-size=8192"

Alternatively you can increase the amount of memory by adding the following NODE_OPTIONS='--max-old-space-size=8192' config to scripts section in package.json file:

For example change used build script:

{
  "scripts": {
    "build": "your-build-script"
  }
}

to:

{
  "scripts": {
    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' your-build-script"
  }
}

To apply this environment config you need cross-env npm library which can be installed to devDependencies with:

nmp install cross-env --save-dev

Legacy peer dependencies

When you use npm v7 or above to install application, it checks that application dependencies have valid versions compared to the other packages used.

If you want change some dependency version you may use npm-shrinkwrap for this to set the valid version you want.

Another approach is to install other dependency packages for new npm versions above v7 with the --legacy-peer-deps config flag enabled. Please read information in npm documentation.

Example:

Create .npmrc in application folder with the following code:

legacy-peer-deps=true

This will allow using npm install without errors.

Openssl legacy provider

When using Node 18+ for application which uses legacy dependencies, you may receive this error during compilation:

Error: error:0308010C:digital envelope routines::unsupported

To resolve this issue create .npmrc file in the application folder and put this inside:

node-options="--openssl-legacy-provider"

Alternate solution is to open a terminal and export the environment variable before running your Node.js application:

Mac, Ubuntu (and other Linux distributions):

export NODE_OPTIONS=--openssl-legacy-provider

Windows (command prompt)

set NODE_OPTIONS=--openssl-legacy-provider

Windows (PowerShell)

$env:NODE_OPTIONS="--openssl-legacy-provider"

Errors in Strict mode

When running a React 18+ application in development mode with React.StrictMode, React intentionally mounts, unmounts, and re-mounts components to help identify issues such as improper side effects and stale references.

This helps to detect issues such as:

• Leaked resources
• Invalid state retention
• Stale references in closures or asynchronous operations

Accessing Bryntum stores (e.g., ColumnStore or ProjectModel etc) or components after the first render cycle may result in errors because they have already been destroyed. This behavior is specific to React development mode and does not occur in production builds.

Ensure your React application handles component unmounting correctly and does not retain references to destroyed Bryntum instances. For detailed guidance on this behavior and how to properly handle it, refer to the React documentation