uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.69k stars 135 forks source link

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

Closed fatton139 closed 1 month ago

fatton139 commented 1 month ago

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 https://github.com/uiwjs/react-codemirror/issues/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 commented 1 month ago

https://github.com/uiwjs/react-codemirror/blob/c2437c7efe47a08bf9a7f9888f51da487727e068/core/package.json#L11-L17

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

fatton139 commented 1 month ago

https://github.com/uiwjs/react-codemirror/blob/c2437c7efe47a08bf9a7f9888f51da487727e068/core/package.json#L11-L17

@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 commented 4 weeks ago

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 commented 4 weeks ago

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