Deduplicate CodeMirror 6 for the AI Assistant

Bundle a single copy of the CodeMirror 6 core packages, so the AI Assistant chat input works. The AI Assistant in @gooddata/sdk-ui-gen-ai builds its message input on CodeMirror 6 (for autocomplete and highlighting of catalog objects). @gooddata/sdk-ui-kit and @gooddata/sdk-ui-ext also depend on CodeMirror 6 for their code editors. CodeMirror requires a single instance of its core packages in the bundle.

Configure webpack

When you bundle the AI Assistant with webpack, alias the CodeMirror core packages to a single copy so the bundle does not contain duplicate instances:

// In webpack.config.js/cjs
const path = require("path");

resolve: {
    // Dedupe packages to avoid duplicate instances
    alias: {
        "@codemirror/state": path.resolve(__dirname, "node_modules/@codemirror/state"),
        "@codemirror/view": path.resolve(__dirname, "node_modules/@codemirror/view"),
    },
},

Why this configuration is necessary

CodeMirror 6 is modular and consists of several packages that work together. The two most critical packages that require deduplication are:

1. @codemirror/state: Manages the editor state and transactions
2. @codemirror/view: Handles the DOM representation of the editor

Without proper deduplication, you may encounter the following issues:

• Multiple instances of CodeMirror packages leading to broken functionality
• Errors related to incompatible state objects
• Rendering problems in the code editor within the chat interface

Configure Vite

If your project uses Vite instead of webpack, you’ll need a different configuration to achieve the same result. Add the following to your vite.config.js or vite.config.ts:

// In vite.config.js/ts
export default defineConfig({
    // Other Vite config options...
    optimizeDeps: {
        exclude: ["@codemirror/state", "@codemirror/view"],
    },
    resolve: {
        alias: [], // Your other aliases if needed
        dedupe: ["@codemirror/state", "@codemirror/view"],
    },
});

Vite configuration explanation

1. optimizeDeps.exclude: Prevents Vite from optimizing these packages during development, which can cause issues with CodeMirror’s internal mechanisms.
2. resolve.dedupe: Ensures that only one instance of each CodeMirror package is used throughout your application, preventing the same issues that the webpack alias configuration addresses.

The React app template that @gooddata/app-toolkit scaffolds ships with the same resolve.dedupe entry.

Troubleshooting

If the CodeMirror editor in the AI Assistant chat input doesn’t work:

1. Verify that the webpack aliases or the Vite resolve.dedupe entries are configured
2. Check for version mismatches between CodeMirror packages (npm ls @codemirror/state @codemirror/view should list one version of each)
3. Ensure all required styles are imported
4. Check the browser console for error messages related to CodeMirror