Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Require of ES Module not supported #12

Open
Julhol-droid opened this issue Feb 9, 2024 · 0 comments
Open

Error: Require of ES Module not supported #12

Julhol-droid opened this issue Feb 9, 2024 · 0 comments

Comments

@Julhol-droid
Copy link

Julhol-droid commented Feb 9, 2024

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

/home/julian/Programming/html-to-pdf/node_modules/.pnpm/[email protected][email protected]/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[email protected]/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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant