Module "@udecode/plate-alignment/react" and its corresponding type declarations.ts(2307) not found

[mrthoabby]

Description

Bug Report: Module "@udecode/plate-alignment/react" and its corresponding type declarations not found
Code Example:

"use client";
import { AlignPlugin } from "@udecode/plate-alignment/react";
import { createPlateEditor, ParagraphPlugin, Plate, PlateContent } from "@udecode/plate-common/react";
import { HeadingPlugin } from "@udecode/plate-heading/react";

const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    AlignPlugin.configure({
      inject: {
        targetPlugins: [ParagraphPlugin.key, HeadingPlugin.key],
      },
    }),
  ],
});

export default function PageEditor(): JSX.Element {
  return (
    <Plate editor={editor} onChange={(data) => console.log(data)}>
      <PlateContent placeholder="Type..." />
    </Plate>
  );
}

Error:
Module "@udecode/plate-alignment/react" and its corresponding type declarations not found (ts2307)

The error appears when trying to import AlignPlugin from @udecode/plate-alignment/react. It says that the module and its type declarations are not found, despite the fact that the package is correctly installed.

Package Versions:

Here are the versions of the relevant packages I'm using:

@types/slate: ^0.47.16
@types/slate-react: ^0.50.1
@udecode/plate: ^38.0.6
@udecode/plate-alignment: ^21.5.1
@udecode/plate-autoformat: ^21.5.1
@udecode/plate-basic-elements: ^21.5.1
@udecode/plate-basic-marks: ^21.5.1
@udecode/plate-common: ^38.0.6
@udecode/plate-heading: ^21.5.1
@udecode/slate: ^38.0.4

Everything has been installed normally, but this issue persists with AlignPlugin. Could this be a version compatibility issue or a missing declaration in the alignment package?

Reproduction URL

https://platejs.org/docs/alignment

Reproduction steps

Steps to Reproduce:
Go to your Next.js project directory.
Install the required @udecode/plate-alignment package using:
bash
Copiar código
npm install @udecode/plate-alignment
Create a new React component in your pages folder with the following code:
typescript
Copiar código
"use client";
import { AlignPlugin } from "@udecode/plate-alignment/react";
import { createPlateEditor, ParagraphPlugin, Plate, PlateContent } from "@udecode/plate-common/react";
import { HeadingPlugin } from "@udecode/plate-heading/react";

const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    AlignPlugin.configure({
      inject: {
        targetPlugins: [ParagraphPlugin.key, HeadingPlugin.key],
      },
    }),
  ],
});

export default function PageEditor(): JSX.Element {
  return (
    <Plate editor={editor} onChange={(data) => console.log(data)}>
      <PlateContent placeholder="Type..." />
    </Plate>
  );
}
Run your Next.js project using:
bash
Copiar código
npm run dev
See error in the console or editor:
Error: Module "@udecode/plate-alignment/react" and its corresponding type declarations not found (ts2307).

Plate version

38.0.6

Slate React version

38.0.4

Screenshots

No response

Logs

No response

Browsers

No response

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

You'll need to upgrade all @udecode/plate-* to v38

[lucaspereirasouzat]

@zbeyens same problem here, seems to be a package resolution problem.

[lucaspereirasouzat]

on the folder have dist folder react and not resolves this directory

[mybarman]

I get this. Using node16, nodenext fixes it but breaks other parts of my app

Cannot find module '@udecode/plate-common/react' or its corresponding type declarations.
  There are types at '/Users/arindambarman/src/moina/node_modules/@udecode/plate-common/dist/react/index.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.```

[mybarman]

changing the module resolution to bundler fixed it. It was node earlier.