Error: Require of ES Module not supported

Hello i get this error, when trying to import the Editor like in the demo:

/home/julian/Programming/html-to-pdf/node_modules/.pnpm/ts-node@9.1.1_typescript@4.9.5/node_modules/ts-node/dist/index.js:701 return old(m, filename); Error [ERR_REQUIRE_ESM]: require() of ES Module /home/julian/Programming/html-to-pdf/node_modules/.pnpm/@grapesjs+react@1.0.0/node_modules/@grapesjs/react/dist/index.umd.js from /home/julian/Programming/html-to-pdf/src/collections/PdfTemplates/Editor/index.tsx not supported. index.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

import GjsEditor from '@grapesjs/react';' For my project i use Payload CMS and want to use GrapesJS as my Editor My TsConfig:

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true,
    "esModuleInterop": true,
    "module": "CommonJS",
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
    "paths": {
      "payload/generated-types": ["./src/payload-types.ts"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "build"],
  "ts-node": {
    "transpileOnly": true,
    "swc": true
  }
}

My package.json

{
  "name": "html-to-pdf",
  "description": "A HTML to pdf API",
  "version": "1.0.0",
  "main": "dist/server.js",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc",
    "build": "pnpm copyfiles && pnpm build:payload && pnpm build:server",
    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload",
    "test": "jest --forceExit --detectOpenHandles"
  },
  "dependencies": {
    "@babel/preset-react": "^7.23.3",
    "@grapesjs/react": "^1.0.0",
    "@nouance/payload-better-fields-plugin": "^1.1.1",
    "@payloadcms/bundler-webpack": "^1.0.0",
    "@payloadcms/db-mongodb": "^1.1.0",
    "@payloadcms/db-postgres": "^0.x",
    "@payloadcms/live-preview-react": "^0.2.0",
    "@payloadcms/richtext-slate": "^1.4.0",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "grapesjs": "^0.21.8",
    "grapesjs-blocks-basic": "^1.0.2",
    "grapesjs-zoom-plugin": "^1.0.5",
    "mustache": "^4.2.0",
    "payload": "^2.0.0",
    "prettier": "^3.1.1",
    "puppeteer": "^21.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-typescript": "^7.23.3",
    "@payloadcms/eslint-config": "^1.0.0",
    "@types/express": "^4.17.9",
    "@types/jest": "^29.5.11",
    "@types/mustache": "^4.2.5",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "autoprefixer": "^10.4.16",
    "babel-jest": "^29.7.0",
    "copyfiles": "^2.4.1",
    "css-loader": "^6.8.1",
    "isomorphic-fetch": "^3.0.0",
    "jest": "^29.7.0",
    "mongodb-memory-server": "^9.1.3",
    "nodemon": "^2.0.6",
    "postcss": "^8.4.32",
    "postcss-loader": "^7.3.3",
    "tailwindcss": "^3.3.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  },
  "resolutions": {
    "jackspeak": "2.1.1"
  }
}

Any help would be appreciated. Thanks

GrapesJS / react

Error: Require of ES Module not supported #12