Implement 'exports' field in package.json for the core & basics setup packages

[fatton139]

Added exports field to the core (@uiw/react-codemirror) and basic setup (@uiw/codemirror-extensions-basic-setup) package.json so Node-like environments such as the test runners can utilise the esm outputs.

Context:

Our unit tests are failing with:

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

After some investigation, it looks like when this library is used in a Node environment all imports use the cjs output. main and module are already defined and work for bundlers. However, Node doesn't have support for module and opts to look in exports for entry points. Since exports is not defined it falls back to main meaning Node will use the cjs outputs of this library. Normally this is fine, but the @codemirror packages (i.e. @codemirror/language) in the peerDependencies do define exports so the esm outputs are used if we use any of those packages are used in our source code resulting in the error above.

We're using @codemirror/language to construct an extension that gets passed into useCodeMirror, where cjs is used but the extension uses the esm output. This results in the instanceof checfailingil as the esm instance is not the cjs class.

Likely related to #680 as they're using SSR which is potentially also in a Node-like environment.

We've manually modified the package.json locally to include the export field asserted our tests are passing and are using the correct esm output.

[jaywcjlove]

react-codemirror/core/package.json

Lines 11 to 17 in c2437c7

	"exports": {
	".": {
	"require": "./cjs/index.js",
	"import": "./esm/index.js"
	},
	"./*": "./*"
	},

@fatton139 modified exports field to fix README.md loading issue in documentation, unsure if other problems persist

[fatton139]

react-codemirror/core/package.json

Lines 11 to 17 in c2437c7

	"exports": {
	".": {
	"require": "./cjs/index.js",
	"import": "./esm/index.js"
	},
	"./*": "./*"
	},

@fatton139 modified exports field to fix README.md loading issue in documentation, unsure if other problems persist

Thanks for fixing that, no problems on our side.

Cheers!

[sotasan]

This change now breaks my build and I always get this error:

#17 8.759 website:build: (node:66) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
#17 8.759 website:build: (Use `node --trace-warnings ...` to show where the warning was created)
#17 8.760 website:build: /build/node_modules/.pnpm/@uiw+codemirror-extensions-basic-setup@4.23.6_@codemirror+autocomplete@6.18.2_@codemirror+lan_t2q76exsezmrgemrtohcxodgnq/node_modules/@uiw/codemirror-extensions-basic-setup/esm/index.js:1
#17 8.760 website:build: import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap } from '@codemirror/view';
#17 8.760 website:build: ^^^^^^
#17 8.760 website:build: 
#17 8.760 website:build: SyntaxError: Cannot use import statement outside a module
#17 8.760 website:build:     at wrapSafe (node:internal/modules/cjs/loader:1383:18)
#17 8.760 website:build:     at Module._compile (node:internal/modules/cjs/loader:1412:20)
#17 8.760 website:build:     at Object..js (node:internal/modules/cjs/loader:1551:10)
#17 8.760 website:build:     at Module.load (node:internal/modules/cjs/loader:1282:32)
#17 8.760 website:build:     at Function._load (node:internal/modules/cjs/loader:1098:12)
#17 8.760 website:build:     at TracingChannel.traceSync (node:diagnostics_channel:315:14)
#17 8.760 website:build:     at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
#17 8.760 website:build:     at cjsLoader (node:internal/modules/esm/translators:318:5)
#17 8.760 website:build:     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:258:7)
#17 8.760 website:build:     at ModuleJob.run (node:internal/modules/esm/module_job:262:25)

[jaywcjlove]

@sotasan Could you provide an example to help us resolve this issue?