Summary

When integrating CodeMirror 6 in applications bundled with webpack, multiple instances of critical CodeMirror packages (@codemirror/state and @codemirror/view) are created, causing broken functionality, incompatible state objects, and rendering problems. This requires manual deduplication configuration in both bundlers, which should ideally be handled automatically.

Environment
Webpack: v5.58.0
Webpack CLI: v4.9.2
Webpack Dev Server: v4.15.2
@codemirror/state: v6.5.2
@codemirror/view: v6.36.4
React: v18.2.0
Node.js: (latest stable)
OS: macOS

Description
CodeMirror 6 is modular and consists of several packages that work together. When integrated into a project using webpack or vite, the bundlers fail to properly deduplicate the CodeMirror packages, leading to multiple instances of the same package being loaded. This causes critical issues with the editor functionality.

The two most affected packages are:

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

Without proper deduplication, the following issues occur:

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

Steps to Reproduce

• Create a new React application using webpack or vite
• Install CodeMirror 6 packages: @codemirror/state, @codemirror/view, and other required CodeMirror packages
• Create a component that uses CodeMirror
• Import this component in another part of your application
• Run the application and observe the console errors or broken functionality

Current Workarounds

// In webpack.config.js/cjs

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"),
    },
},

Expected Behavior

The bundlers should automatically deduplicate these packages without requiring manual configuration. This is especially important for packages like CodeMirror that rely on singleton instances of certain modules to function correctly.

Actual Behavior

Without the manual deduplication configuration, multiple instances of CodeMirror packages are created, causing the editor to malfunction with errors related to incompatible state objects and rendering issues.

Possible Root Cause

The issue may be related to how webpack handle module resolution and deduplication, particularly for packages that require singleton instances or are mark as sideEffect false. The problem might be exacerbated by the modular nature of CodeMirror 6, where different parts of an application might import different CodeMirror packages that internally depend on @codemirror/state and @codemirror/view. I think that is somehow related to agresive tree shaking that cause some parts of codemirror package are created more than once and than some inner check for instanceof are not working. Without alias rule i was observe that state object create was called 2 times from 2 different places in final bundle, but with allias is also called 2times but from 1 place now.

Additional info

We use in project packages that internally use codemirror multiple times, but always its same version of this package.