Skip to content

[Regression] InlineAutocomplete uses ESM only module textarea-caret breaking Next.js #2238

Closed
@Swiftwork

Description

@Swiftwork

Describe the bug
The changes introducing InlineAutocomplete break previously working builds using Next.js due to the fact that it uses the ESM only module @koddsson/textarea-caret.

To Reproduce
Steps to reproduce the behavior:

  1. Setup a new next.js app
  2. Add @primer/react
  3. Use primer components
  4. See error

Expected behavior
Continued support for Next.js with no build errors. Possibly by inlining work provided by @koddsson/textarea-caret @primer/react.

Screenshots

Error: require() of ES Module C:\Projects\Git\@org\project\.yarn\cache\@koddsson-textarea-caret-npm-4.0.1-58e5d1bae2-7a44f96cdf.zip\node_modules\@koddsson\textarea-caret\index.js from C:\Projects\Git\@org\project\.yarn\__virtual__\@primer-react-virtual-c9b4fb8b62\0\cache\@primer-react-npm-35.6.0-0eb6ab2331-c71e61be84.zip\node_modules\@primer\react\lib\drafts\utils\character-coordinates.js not supported.
Instead change the require of index.js in C:\Projects\Git\@org\project\.yarn\__virtual__\@primer-react-virtual-c9b4fb8b62\0\cache\@primer-react-npm-35.6.0-0eb6ab2331-c71e61be84.zip\node_modules\@primer\react\lib\drafts\utils\character-coordinates.js to a dynamic import() which is available in all CommonJS modules.
    at Object.require$$0.Module._extensions..js (C:\Projects\Git\@org\project\.pnp.cjs:19891:15)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.require$$0.Module._load (C:\Projects\Git\@org\project\.pnp.cjs:19735:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Projects\Git\@org\project\.yarn\__virtual__\@primer-react-virtual-c9b4fb8b62\0\cache\@primer-react-npm-35.6.0-0eb6ab2331-c71e61be84.zip\node_modules\@primer\react\lib\drafts\utils\character-coordinates.js:8:45)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.require$$0.Module._extensions..js (C:\Projects\Git\@org\project\.pnp.cjs:19895:33)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
      code: 'ERR_REQUIRE_ESM'
    }

Desktop (please complete the following information):

  • OS: All
  • Browser: All
  • Version: 35.6.0

Smartphone (please complete the following information):

  • Device: All
  • OS: All
  • Browser: All
  • Version: 35.6.0

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions