Node (16/next) imports CommonJS instead of ESM due to missing type and exports in package.json

[tomi-bigpi]

What’s the bug you are facing?

There have been several user discussions and bug reports related to prosemirror-model failing with some form of looks like multiple versions of prosemirror-model were loaded, such as:

• TipTap / ProseMirror import issue #3282
• Error: Looks like multiple versions of prosemirror-model were loaded #577 (comment)
• Uncaught RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded) #865
• Duplicate use of selection JSON ID gapcursor #3209
• Recent port of ProseMirror to TypeScript and ProseMirror version bumps (hours ago) break TipTap #2836 (comment)
• etc.

Some of these are due to multiple versions getting loaded, e.g. CommonJS and ES Modules, at the same time and then causing runtime errors.

We recently ran into this with our codebase (all TypeScript/ESM) and build system (Rush/Heft) and tracked it down to the package.json files not having "type": "module" and the newer exports field set.

The TypeScript documentation regarding ECMAScript Modules in Node.js has a good explanation and resolution.

For example, tiptap-core works great by changing the file extension for CommonJS to .cjs (and ESM to .mjs for consistency and explicitness) and modifying package.json, so that it provides the new syntax and fallbacks for older versions of Node and other build systems:

  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/packages/core/src/index.d.ts",
      "import": "./dist/tiptap-core.mjs",
      "require": "./dist/tiptap-core.cjs"
    }
  },
  "main": "dist/tiptap-core.cjs",
  "umd": "dist/tiptap-core.umd.js",
  "module": "dist/tiptap-core.mjs",
  "types": "dist/packages/core/src/index.d.ts",

but without we get a RangeError: Can not convert (something) to a Fragment (looks like multiple versions of prosemirror-model were loaded) when different code paths load a mix of CJS and ESM (our library, y-prosemirror, tiptap, etc.).

Note: If I'm reading Dangers of exporting both CJS and ESM in Dual package hazard correctly, it is still possible to run into the same issue if there is shared state, but these changes should at least clean up the code paths in many cases.

Which browser was this experienced in? Are any special extensions installed?

In Node, not the browser.

How can we reproduce the bug on our side?

• Create a stub project with npm init
• (Optional) Add "type": "module", to package.json.
• Create index.mjs and add the following code to it:

import { getSchema } from "@tiptap/core";

getSchema(null);

• Run node index.mjs
• The exception clearly displays that the CJS version is loaded:

TypeError: Cannot read properties of null (reading 'map')
    at Function.flatten (/some-path/tiptap-test/node_modules/@tiptap/core/dist/tiptap-core.cjs.js:953:14)

Can you provide a CodeSandbox?

No response

What did you expect to happen?

The expectation is that an import from an ESM project uses a single ESM instance of TipTap, so that these errors don't happen. Also that CommonJS loads CJS.

Anything to add? (optional)

I have a PR ready to go that patches all the package.json files for the repo, and I will submit it shortly.

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖