SyntaxError: Cannot use import statement outside a module

[Julhol-droid]

When i try to import the React Component inside my project i get: SyntaxError: Cannot use import statement outside a module

import React, { useEffect } from 'react'
import IsolatedBlockEditor from '@automattic/isolated-block-editor'

const Editor = () => {
  return <IsolatedBlockEditor />
}

export default Editor

The error:

/home/julian/Programming/html-to-pdf/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@automattic/isolated-block-editor/build/index.js:79
import { createElement } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.require.extensions.<computed> [as .js] (/home/julian/Programming/html-to-pdf/node_modules/.pnpm/[email protected][email protected]/node_modules/ts-node/src/index.ts:1045:43)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/julian/Programming/html-to-pdf/src/collections/PdfTemplates/Editor/index.tsx:2:1)
[nodemon] app crashed - waiting for file changes before starting...

My .tsconfig.json

{
  "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": {
    "@automattic/isolated-block-editor": "^2.28.0",
    "@babel/preset-react": "^7.23.3",
    "@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",
    "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"
  }
}

My Other Versions:
OS: WSL in Windows 11
Node: 20.11.0

Any help would be appreciate. Thanks in advance