Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Oct 24, 2024

Conversation

fatton139
Copy link
Contributor

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 jaywcjlove merged commit 8f1ff2d into uiwjs:master Oct 24, 2024
1 check failed
jaywcjlove added a commit that referenced this pull request Oct 24, 2024
@jaywcjlove
Copy link
Member

"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

github-actions bot pushed a commit that referenced this pull request Oct 24, 2024
@fatton139
Copy link
Contributor Author

"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!

jaywcjlove added a commit that referenced this pull request Oct 25, 2024
github-actions bot pushed a commit that referenced this pull request Oct 25, 2024
@sotasan
Copy link

sotasan commented Nov 1, 2024

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/@[email protected]_@[email protected]_@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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants