plate-emoji plugin import fails with error: `@emoji-mart/data/sets/14/native.json needs an import assertion of type "json"`

[cluk3]

Description

When importing @udecode/plate-emoji within an ESM project (in my case I'm using the latest remix with Vite, I can't say for sure if it will fail for any esm environment) i get the following error:

Module "file:///node_modules/@emoji-mart/data/sets/14/native.json" needs an import assertion of type "json"

I was able to reproduce the bug on this stackblitz I can see it is properly asserted in the source code on github, but when I go to /node_modules/@udecode/plate-emoji/dist/index.mjs the assert is not there anymore. I assume that turborepo is somehow not preserving the assertion when bundling... For the moment I solved the issue by manually adding the assertion in the plate-emoji/dist/index.mjs, but as you can understand it's not really a viable long term solution...

Steps to Reproduce

Just import plate-emoji in a remix project and run npm run dev.

Sandbox

https://stackblitz.com/edit/remix-run-remix-6wsmsa?file=app%2Froot.tsx

Environment

latest version of the all the @udecode packages + slate.

Bounty

Click here to add a bounty via Algora.

Funding

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

[ECecillo]

Hello 👋,

We faced the same issue as you did @cluk3 and made the following patch in our project using patch-package :

diff --git a/node_modules/@udecode/plate-emoji/dist/index.mjs b/node_modules/@udecode/plate-emoji/dist/index.mjs
index efc12cb..b6275a8 100644
--- a/node_modules/@udecode/plate-emoji/dist/index.mjs
+++ b/node_modules/@udecode/plate-emoji/dist/index.mjs
@@ -348,10 +348,10 @@ var EmojiFloatingGridBuilder = class {
 };

 // src/utils/EmojiLibrary/EmojiFloatingLibrary.ts
-import emojiMartData2 from "@emoji-mart/data";
+import emojiMartData2 from "@emoji-mart/data" assert {type: "json"};

 // src/utils/EmojiLibrary/EmojiInlineLibrary.ts
-import emojiMartData from "@emoji-mart/data";
+import emojiMartData from "@emoji-mart/data" assert {type: "json"};
 var EmojiInlineLibrary = class {
   constructor(library = emojiMartData) {
     this._hash = {};

Execute the following command : npx patch-package @udecode/plate-emoji

This issue is linked to the following feature introduced in node v18: https://v8.dev/features/import-assertions

Official Node reference: https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#json-modules

[zbeyens]

@ECecillo We have the same fix in the package, do we miss something?

[cluk3]

Hello 👋,

We faced the same issue as you did @cluk3 and made the following patch in our project using patch-package :

diff --git a/node_modules/@udecode/plate-emoji/dist/index.mjs b/node_modules/@udecode/plate-emoji/dist/index.mjs
index efc12cb..b6275a8 100644
--- a/node_modules/@udecode/plate-emoji/dist/index.mjs
+++ b/node_modules/@udecode/plate-emoji/dist/index.mjs
@@ -348,10 +348,10 @@ var EmojiFloatingGridBuilder = class {
 };

 // src/utils/EmojiLibrary/EmojiFloatingLibrary.ts
-import emojiMartData2 from "@emoji-mart/data";
+import emojiMartData2 from "@emoji-mart/data" assert {type: "json"};

 // src/utils/EmojiLibrary/EmojiInlineLibrary.ts
-import emojiMartData from "@emoji-mart/data";
+import emojiMartData from "@emoji-mart/data" assert {type: "json"};
 var EmojiInlineLibrary = class {
   constructor(library = emojiMartData) {
     this._hash = {};

Execute the following command : npx patch-package @udecode/plate-emoji

This issue is linked to the following feature introduced in node v18: https://v8.dev/features/import-assertions

Official Node reference: https://nodejs.org/dist/latest-v18.x/docs/api/esm.html#json-modules

@ECecillo I didn't know about patch-package, super useful, thanks for sharing!

@ECecillo We have the same fix in the package, do we miss something?

@zbeyens as I wrote on the issue, even if in the source code it is properly asserted, the assertion is removed at compile time (I assume by turborepo), you can check it yourself by looking at the dist. So to fix the issue you should either find a way to tell turborepo to not remove the assertion or use another bundler in case this is not possible. I guess another hacky solution would be to copy paste the emoji mart data inside a js file as an object so you would remove the problem at the root.

[zbeyens]

@cluk3 Makes sense. I'll give a try with with instead.