Assertion Type Missing

[Kaldrogh]

Description

Trying to install Plate by following meticulously the installation guide, but i get multiple errors everytime like this one:

⨯ TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "file:///C:/Users/user/Documents/GitHub/project/node_modules/@emoji-mart/data/sets/15/native.json" needs an import attribute of type "json" at validateAttributes (node:internal/modules/esm/assert:89:15) at defaultLoad (node:internal/modules/esm/load:153:3) at async ModuleLoader.load (node:internal/modules/esm/loader:396:7) at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:45) { code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING',

My next.config.js:

`/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')

/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
esmExternals: 'loose'
},
reactStrictMode: false,
eslint: {
ignoreDuringBuilds: true
},
trailingSlash: true,
transpilePackages: ['react-tweet', '@emoji-mart/data', ],
webpack: config => {
config.externals.push('pino-pretty', 'lokijs', 'encoding')

config.resolve.alias = {
  ...config.resolve.alias,
  apexcharts: path.resolve(__dirname, './node_modules/apexcharts-clevision')
}

return config

}
}

module.exports = nextConfig
`

I also had to move the "import './code-block-element.css'" to my global app file because it throws an error when trying to load if from the original file.

Reproduction URL

No response

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Plate version

Latest

Slate React version

^0.103.0

Screenshots

No response

Logs

(node:61284) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⨯ ./node_modules/react-tweet/dist/twitter-theme/theme.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\react-tweet\dist\twitter-theme\tweet-container.js

⨯ TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "file:///C:/Users/user/Documents/GitHub/project/node_modules/@emoji-mart/data/sets/15/native.json" needs an import attribute of type "json"
    at validateAttributes (node:internal/modules/esm/assert:89:15)
    at defaultLoad (node:internal/modules/esm/load:153:3)
    at async ModuleLoader.load (node:internal/modules/esm/loader:396:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:45) {
  code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING',

Browsers

Chrome

Funding

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

[mareksuscak]

We're running into the same issue and can't get the project to build.

EDIT: We have worked around this issue by creating a patch using yarn patch. The patch differs between versions but here's ours (fixes v34.0.8 of @udecode/plate-emoji):

diff --git a/dist/index.mjs b/dist/index.mjs
index 4e2c1eecad09d8507113fb55dd19463c9fbfd984..ca34ef7a596370f170adcde17e420585e0a1b03b 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -384,10 +384,10 @@ var EmojiFloatingGridBuilder = class {
 };
 
 // src/utils/EmojiLibrary/EmojiFloatingLibrary.ts
-import emojiMartData2 from "@emoji-mart/data";
+import emojiMartData2 from "@emoji-mart/data" with { type: 'json' };
 
 // src/utils/EmojiLibrary/EmojiInlineLibrary.ts
-import emojiMartData from "@emoji-mart/data";
+import emojiMartData from "@emoji-mart/data" with { type: 'json' };
 var EmojiInlineLibrary = class {
   constructor(library = emojiMartData) {
     this._hash = {};

The problem is that even though we this package uses the correct import import emojiMartData from "@emoji-mart/data" with { type: 'json' };, when compiled, with { type: 'json' } is trimmed away and that breaks the build in a modern NextJS app.

[robotzhang]

same problem