code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'

[fzsf163]

I have installed plate js to use with remix js by following docs guide. But after following all steps I get following problem.

this is how I called it in remix js. If I comment out PlateEditor then the problem goes away.

  import { ClientOnly } from "remix-utils/client-only";

    <div>
        <ClientOnly fallback={<p>Loading Editor Please Wait...</p>}>
          {() => (
               <PlateEditor></PlateEditor> 
          )}
        </ClientOnly>
      </div>

Folder structure

package.json

{
  "name": "blog-moon-candy-post",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev -c \"node server.mjs\"",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@prisma/client": "^5.8.0",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toolbar": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@remix-run/css-bundle": "^2.4.1",
    "@remix-run/express": "^2.4.1",
    "@remix-run/node": "^2.4.1",
    "@remix-run/react": "^2.4.1",
    "@udecode/cn": "^29.0.1",
    "@udecode/plate-alignment": "^30.1.2",
    "@udecode/plate-autoformat": "^30.1.2",
    "@udecode/plate-basic-marks": "^30.1.2",
    "@udecode/plate-block-quote": "^30.1.2",
    "@udecode/plate-break": "^30.1.2",
    "@udecode/plate-caption": "^30.1.2",
    "@udecode/plate-code-block": "^30.1.2",
    "@udecode/plate-combobox": "^30.1.2",
    "@udecode/plate-comments": "^30.1.2",
    "@udecode/plate-common": "^30.1.2",
    "@udecode/plate-dnd": "^30.1.2",
    "@udecode/plate-emoji": "^30.1.2",
    "@udecode/plate-floating": "^30.1.2",
    "@udecode/plate-font": "^30.1.2",
    "@udecode/plate-heading": "^30.1.2",
    "@udecode/plate-highlight": "^30.1.2",
    "@udecode/plate-horizontal-rule": "^30.1.2",
    "@udecode/plate-indent": "^30.1.2",
    "@udecode/plate-indent-list": "^30.1.2",
    "@udecode/plate-juice": "^30.1.2",
    "@udecode/plate-kbd": "^30.1.2",
    "@udecode/plate-line-height": "^30.1.2",
    "@udecode/plate-link": "^30.1.2",
    "@udecode/plate-list": "^30.1.2",
    "@udecode/plate-media": "^30.1.2",
    "@udecode/plate-mention": "^30.1.2",
    "@udecode/plate-node-id": "^30.1.2",
    "@udecode/plate-normalizers": "^30.1.2",
    "@udecode/plate-paragraph": "^30.1.2",
    "@udecode/plate-reset-node": "^30.1.2",
    "@udecode/plate-resizable": "^30.1.2",
    "@udecode/plate-select": "^30.1.2",
    "@udecode/plate-selection": "^30.1.2",
    "@udecode/plate-serializer-csv": "^30.1.2",
    "@udecode/plate-serializer-docx": "^30.1.2",
    "@udecode/plate-serializer-md": "^30.1.2",
    "@udecode/plate-tabbable": "^30.1.2",
    "@udecode/plate-table": "^30.1.2",
    "@udecode/plate-trailing-block": "^30.1.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^0.2.0",
    "express": "^4.18.2",
    "isbot": "^3.6.8",
    "lucide-react": "^0.309.0",
    "react": "^18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-lite-youtube-embed": "^2.4.0",
    "react-tweet": "^3.2.0",
    "remix-utils": "^7.5.0",
    "slate": "^0.101.5",
    "slate-history": "^0.100.0",
    "slate-hyperscript": "^0.100.0",
    "slate-react": "^0.101.5",
    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.4.1",
    "@types/node": "^20.10.8",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prisma": "^5.8.0",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "description": "- [Remix Docs](https://remix.run/docs)",
  "version": "1.0.0",
  "main": "remix.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

plate-component.json

{
  "$schema": "https://platejs.org/schema.json",
  "style": "default",
  "rsc": false,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "app/components",
    "plate-ui": "app/components/plate-ui"
  }
}

I also have shadcn/ui installed previously

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "app/components",
    "utils": "app/@/lib/utils"
  }
}

[fzsf163]

Solved it.

In remix js we have to write file name this following way to render entire component on the client,

Plate-Editor.tsx ❌
Plate-Editor.client.tsx ✔️

Inside tooltip.tsx && draggable.tsx (components/plate-ui) <Tooltip/> must be inside <TooltipProvider/> .

then render the <EditorComponent> inside <ClientOnly /> from remix-utils/client-only