TypeError: new.target does not define a custom element

[kitaliev]

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

Safari:

Firefox and Chrome:

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

[fourdim]

We have recently experienced a large change on how to define the custom element.
Previously, we used Lit's builtin decorator but it turns out to be not good for tree-shaking.
So we separate the define the custom element to a different function, which is side effects in functional programming.
In this case, I would recommend you to run the side effects manually:

import { effects as blocksEffects } from '@blocksuite/blocks/effects';
import { effects as presetsEffects } from '@blocksuite/presets/effects';

blocksEffects();
presetsEffects();

Just like what we done in the playground:

https://github.com/toeverything/blocksuite/blob/723c326f91d09a2a66cebcb952d20f75db856571/packages/playground/apps/starter/main.ts#L32C1-L33C18

[kitaliev]

Yes! Thank you!
That fixed the problem!