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

TypeError: new.target does not define a custom element #8393

Open
kitaliev opened this issue Sep 18, 2024 · 0 comments
Open

TypeError: new.target does not define a custom element #8393

kitaliev opened this issue Sep 18, 2024 · 0 comments
Assignees
Labels
mod:edgeless Module: related to edgeless mode type:bug Something isn't working

Comments

@kitaliev
Copy link

Description:
I'm encountering an error when trying to run the EdgelessEditor component using version 0.17.10.

Safari:

image

Firefox and Chrome:

image

Code:

import { EdgelessEditor } from '@blocksuite/presets'
import { DocCollection, Schema } from '@blocksuite/store'
import { AffineSchemas } from '@blocksuite/blocks'
import '@blocksuite/presets/themes/affine.css'

const schema = new Schema().register(AffineSchemas)
const collection = new DocCollection({ schema })
collection.meta.initialize()

const doc = collection.createDoc({ id: 'page1' })
doc.load(() => {
  const pageBlockId = doc.addBlock('affine:page', {})
  doc.addBlock('affine:surface', {}, pageBlockId)
  const noteId = doc.addBlock('affine:note', {}, pageBlockId)
  doc.addBlock('affine:paragraph', {}, noteId)
})

const editor = new EdgelessEditor()
editor.doc = doc
document.body.appendChild(editor)

After some research, I found this answer, which suggests that const editor = new EdgelessEditor() might be the issue. So, I modified main.js as follows:

import { EdgelessEditor } from '@blocksuite/presets'
import { DocCollection, Schema } from '@blocksuite/store'
import { AffineSchemas } from '@blocksuite/blocks'
import '@blocksuite/presets/themes/affine.css'

const schema = new Schema().register(AffineSchemas)
const collection = new DocCollection({ schema })
collection.meta.initialize()

const doc = collection.createDoc({ id: 'page1' })
doc.load(() => {
  // const pageBlockId = doc.addBlock('affine:page', {})
  // doc.addBlock('affine:surface', {}, pageBlockId)
  // const noteId = doc.addBlock('affine:note', {}, pageBlockId)
  // doc.addBlock('affine:paragraph', {}, noteId)
})

// const editor = new EdgelessEditor()
customElements.define('edgeless-editor', EdgelessEditor)
const editor = document.createElement('edgeless-editor')
editor.doc = doc
document.body.appendChild(editor)

However, I continued to get the same error until I commented out everything inside the doc.load callback.

Could you provide assistance with this issue?

I'm using
node 20.17
yarn 1.22
@blocksuite/blocks 0.17.10
@blocksuite/presets 0.17.10
@blocksuite/store 0.17.10
vite ^5.4.6
yjs ^13.6.19

@doodlewind doodlewind added type:bug Something isn't working mod:edgeless Module: related to edgeless mode labels Sep 18, 2024
@doodlewind doodlewind self-assigned this Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
mod:edgeless Module: related to edgeless mode type:bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

2 participants