Implementing PlateJS in a React App: Compilation Error with '@udecode/plate-core' and 'nanoid/non-secure'

Question

Hello StackOverflow community,

I'm attempting to integrate PlateJS into my React application for rich text editing features. I use create-react-app and @craco/craco for setting up and configuring my app. However, when trying to include PlateJS's @udecode/plate-core package into my project, I'm encountering the following compilation error:

Failed to compile.

./node_modules/@udecode/plate-core/dist/index.mjs
Attempted import error: 'nanoid' is not exported from 'nanoid/non-secure' (imported as 'nanoid2').

I suspect the issue is related to the nanoid package, but I've verified that it's correctly installed by checking its presence in my package.json.

Steps I've taken so far:

• I've deleted the node_modules folder and package-lock.json file, then reinstalled the dependencies with npm install.
• I've tried different versions of nanoid (latest and previous versions).
• Ensured that I'm using the latest versions of PlateJS and its dependencies.

I'm using craco with a configuration file in my project and haven't made any specific configurations related to PlateJS.

Does anyone have any idea or suggestion on how I could resolve this issue? Any help or guidance would be greatly appreciated.

Thank you!