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.

[abhi-bc]

this will causes other issues if the app has older TS files. Struggling with it right now

[abhi-bc]

@zbeyens is there any way around it without having to change moduleResolution? In a large application, changing moduleResolution for one library ends up causing issues all over with other parts.

[zbeyens]

I don't think so

[abhi-bc]

We figured out one way to resolve this without changing moduleResolution to bundler

In tsconfig.json:

{
  "compilerOptions": {
    moduleResolution: "node",
    paths: {
      "@udecode/plate-common/react": [
        "<path/to/node_modules>/@udecode/plate-common/dist/react/index.d.ts"
      ],
      "@udecode/plate-core/react": [
        "<path/to/node_modules>/@udecode/plate-core/dist/react/index.d.ts"
      ],
      "@udecode/plate-list/react": [
        "<path/to/node_modules>/@udecode/plate-list/dist/react/index.d.ts"
      ],
      // do the same for all @udecode/plate-*/react packages...
    }
  }
}

and in vite.config.ts

defineConfig({
  // ...otherConfig
  resolve: {
    alias: {
      // Handle both base and /react suffixed imports
      '@udecode/plate-common/react': path.resolve(
        __dirname,
        '<path/to/node_modules>/@udecode/plate-common/dist/react',
      ),
      '@udecode/plate-core/react': path.resolve(
        __dirname,
        '<path/to/node_modules>/@udecode/plate-core/dist/react',
      ),
      '@udecode/plate-list/react': path.resolve(
        __dirname,
        '<path/to/node_modules>/@udecode/plate-list/dist/react',
      ),
      
      // Also include base package aliases for non-/react imports
      '@udecode/plate-common': path.resolve(__dirname, '<path/to/node_modules>/@udecode/plate-common'),
      '@udecode/plate-core': path.resolve(__dirname, '<path/to/node_modules>/@udecode/plate-core'),
      '@udecode/plate-list': path.resolve(__dirname, '<path/to/node_modules>/@udecode/plate-list'),
      
      // Do the same for all @udecode/plate-* packages you are using.
    }
  }
})

this fixed it for us