The inferred type of 'importMap' cannot be named without a reference

[edtorba]

Describe the Bug

After bumping the payload and all related dependencies from 3.2.1 to 3.6.0, we suddenly started encountering the following error:

Type error: The inferred type of 'importMap' cannot be named without a reference to '../../../node_modules/@payloadcms/richtext-lexical/dist/features/link/server'. This is likely not portable. A type annotation is necessary.

  22 | import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
  23 |
> 24 | export const importMap = {
     |              ^
  25 |   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
  26 |   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
  27 |   "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   Linting and checking validity of types  ... ELIFECYCLE  Command failed with exit code 1.

Link to the code that reproduces this issue

https://github.com/edtorba/payloadcms-importmap

Reproduction Steps

• payload generate:importmap
• run pnpm build or pnpm check-types

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Payload: 3.6.0
Node: 20.17.0
Next.js: 15.1.0

[github-actions[bot]]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[LouisCuvelier]

Also getting the same

web:lint: src/app/(payload)/admin/importMap.js(27,14): error TS2742: The inferred type of 'importMap' cannot be named without a reference to '../../../../node_modules/@payloadcms/richtext-lexical/dist/features/link/server'. This is likely not portable. A type annotation is necessary.
web:lint: src/app/(payload)/admin/importMap.js(27,14): error TS2742: The inferred type of 'importMap' cannot be named without a reference to '../../../../node_modules/@payloadcms/richtext-lexical/dist/features/upload/client/feature.client'. This is likely not portable. A type annotation is necessary.
web:lint: src/app/(payload)/admin/importMap.js(27,14): error TS2742: The inferred type of 'importMap' cannot be named without a reference to '../../../../node_modules/@payloadcms/richtext-lexical/dist/types'. This is likely not portable. A type annotation is necessary.
web:lint: src/app/(payload)/admin/importMap.js(27,14): error TS2742: The inferred type of 'importMap' cannot be named without a reference to '../../../../node_modules/payload/dist/fields/config/types'. This is likely not portable. A type annotation is necessary.

[edtorba]

I'll try to set up a reproduction repo tonight, I didn't have time last night.

[edtorba]

Status update: I attempted to replicate the issue here: https://github.com/edtorba/payloadcms-importmap. Annoyingly, it builds successfully there, although VS Code still complains about the same issue, e.g.,

am now comparing both projects (ts config, eslint config, all of the configs) in the hope of spotting the difference.

[edtorba]

@AlessioGr The repository above now replicates the issue. I haven’t checked exactly since which version, but "typescript": "^5.7.2" causes it to fail.

[xn1cklas]

I had the same problem after adding payload to an existing project.

Setting json "declaration": false, "declarationMap": false, fixed it for me.

[LouisCuvelier]

I had the same problem after adding payload to an existing project.

Setting json "declaration": false, "declarationMap": false, fixed it for me.

I'm not sure that's a great solution but it works as a workaround. Thanks

[roastlechon]

I have this issue as well, except with @payloadcms/translations:

Type error: The inferred type of 'importMap' cannot be named without a reference to '.pnpm/@[email protected]/node_modules/@payloadcms/translations'. This is likely not portable. A type annotation is necessary.

[vhorzinek]

Same kind of error here when adding payload to an existing next app. I managed to "fix" it by adding the packages it names in the error to my app's dependencies, but I'm pretty sure thats NOT the way to go :D

[RishilShah12]

I had the same problem after adding payload to an existing project.

Setting json "declaration": false, "declarationMap": false, fixed it for me.

I also did this in my tsconfig and it is building, but what are the side effects of these settings?

[dsod]

For reference, this comment have a comprehensive list of solutions / workarounds. I opted for option 8, until the issue is resolved upstream.

// global.d.ts
declare module 'lexical' {}

I am using a monorepo with project references, hence turning declaration generation off was not an alternative.

[NikoFarrelly]

I have this issue as well, except with @payloadcms/translations:

Type error: The inferred type of 'importMap' cannot be named without a reference to '.pnpm/@[email protected]/node_modules/@payloadcms/translations'. This is likely not portable. A type annotation is necessary.

I had this exact same error, adding a global declaration file as @dsod did above, solved the problem. Along with having our TS at 5.8.2

For reference, this comment have a comprehensive list of solutions / workarounds. I opted for option 8, until the issue is resolved upstream.

// global.d.ts declare module 'lexical' {}

I am using a monorepo with project references, hence turning declaration generation off was not an alternative.

For reference

// global.d.ts
declare module '@payloadcms/translations' {}

[tori-takashi]

I got a same issue.

Type error: The inferred type of 'importMap' cannot be named without a reference to '.pnpm/[email protected]/node_modules/lexical'. This is likely not portable. A type annotation is necessary.

I've tried global.d.ts solution but it not works like this.

> tsc --noEmit

src/components/RichText/index.tsx:42:84 - error TS2322: Type '{ blocks: { mediaBlock: ({ node }: { childIndex: number; converters: JSXConverters<any>; node: any; nodesToJSX: (args: { converters?: JSXConverters<any> | undefined; disableIndent?: boolean | ... 1 more ... | undefined; disableTextAlign?: boolean | ... 1 more ... | undefined; nodes: SerializedLexicalNode[]; parent?:...' is not assignable to type 'JSXConverters<any>'.
  Type '{ blocks: { mediaBlock: ({ node }: { childIndex: number; converters: JSXConverters<any>; node: any; nodesToJSX: (args: { converters?: JSXConverters<any> | undefined; disableIndent?: boolean | ... 1 more ... | undefined; disableTextAlign?: boolean | ... 1 more ... | undefined; nodes: SerializedLexicalNode[]; parent?:...' is not assignable to type '{ [x: string]: JSXConverter<any>; }'.
    Property 'blocks' is incompatible with index signature.
      Type '{ mediaBlock: ({ node }: { childIndex: number; converters: JSXConverters<any>; node: any; nodesToJSX: (args: { converters?: JSXConverters<any> | undefined; disableIndent?: boolean | ... 1 more ... | undefined; disableTextAlign?: boolean | ... 1 more ... | undefined; nodes: SerializedLexicalNode[]; parent?: any; }) =...' is not assignable to type 'JSXConverter<any>'.

 42 const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
                                                                                       ~~
 43   ...defaultConverters,
    ~~~~~~~~~~~~~~~~~~~~~~~
... 
 54   },
    ~~~~
 55 })
    ~~

  ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_re_abd9c18bc08a42aa1e8dc411e8a215b9/node_modules/@payloadcms/richtext-lexical/dist/features/converters/lexicalToJSX/Component/index.d.ts:12:7
    12 }>> = (args: {
             ~~~~~~~~
    13     defaultConverters: JSXConverters<DefaultNodeTypes>;
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    14 }) => JSXConverters<T>;
       ~~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from the return type of this signature.


Found 1 error in src/components/RichText/index.tsx:42

Finally resolved adding lexical 0.28.0 on my package.json

[stevenselles-gf]

My fix was to add "baseUrl": ".", to the compilerOptions in tsconfig.json

[takayumi]

This issue is still relevant. Got it when I installed a plugin that was using an older version of Payload.

Here is the plugin in question: https://github.com/saroroce/payload-extended-import-export-plugin