Bundling

We use Webpack 5 as a bundler internally for our project. This means that we battle-tested the bundling process with it and we know that it fully supports all the features in DXcharts React.

We highly recommend to use Webpack 5 as a bundler for your project to integrate DXcharts React, because it's the most stable and feature rich bundler at the moment.

Different bundlers

You may use another bundler for your project but we can't guarantee that DXcharts React integration will work as expected with it.

First of all, please install the most recent version of a bundler you like, because they might still be in an active development phase, and some of the issues might be already fixed in the latest versions.

Vite

Vite is fully supported (as of DXcharts React v5.17.1 and higher)

Web workers now work correctly in both development and production modes with Vite.

How it works

The library uses self-contained blob workers that are bundler-agnostic. This approach works seamlessly with Vite, Webpack, and other modern bundlers.

Background: Previous versions had issues with web workers in Vite due to limitations in how Vite handles workers from node_modules dependencies (GitHub issue #8427, #11672). This has been resolved by implementing blob workers that work universally across all bundlers.

Required configuration

To avoid CommonJS module compatibility errors, add this to your vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  
  resolve: {
    alias: {
      // Fix CommonJS module compatibility
      'color': 'color/index.js',
    },
  },
  
  worker: {
    format: 'es', // Use ES modules for workers
  },
  
  optimizeDeps: {
    include: [
      // Pre-bundle CommonJS modules to avoid "does not provide an export named 'default'" errors
      'lodash.clonedeep',
      'react-draggable',
      'react-ace',
      'use-sync-external-store/with-selector.js',
      'shallowequal',
      'react-colorful',
      'big.js',
      // Pre-bundle chart libraries to reduce dev server requests (from 2000+ to ~100)
      '@dx-private/dxchart5-react',
      '@dx-private/dxchart5-modules',
    ],
  },
});

Optional: Production bundle optimization

For better production bundle size and caching, add code splitting via rollupOptions:

export default defineConfig({
  // ... other config ...
  
  build: {
    target: 'es2020',
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react/jsx-runtime'],
          'chart-core': ['@dx-private/dxchart5-modules'],
          'dxstudies': ['@dx-private/dxstudies'],
          'styled': ['styled-components'],
          'vendors': ['rxjs', 'fp-ts', 'date-fns', 'comlink'],
        },
      },
    },
  },
});

This splits large dependencies into separate, cacheable chunks.

Older versions (before v5.17.1)

If you're using an older version of DXcharts React (before v5.17.1), web workers are not compatible with Vite. You'll need to disable them:

const ChartReactWithDisabledWorkers = () => {
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp
                dependencies={{
                    ...CREATE_MOCK_PROVIDERS(),
                    chartReactConfig: {
                        disableWorkers: true,
                    },
                }}
            />
        </div>
    );
}