Bug: TypeError: Class constructor TextNode cannot be invoked without 'new'

[The-Code-Monkey]

I get this error after compiling my wrapper code so that I can use the same editor on multiple projects easily.

So i followed this example: https://lexical.dev/docs/concepts/serialization#handling-extended-html-styling

which is what seems to be causing the issue.

https://github.com/The-Code-Monkey/TechStack/blob/main/packages/lexical/src/index.tsx#L54

Lexical version:

Steps To Reproduce

1. import @techstack/lexical into a repo
2. after adding it you get this error

Link to code example:

https://codesandbox.io/p/sandbox/nice-microservice-yq586s?file=%2Fsrc%2Findex.js

The current behavior

There is an error

The expected behavior

Either something is wrong with the docs or the Lib needs updating as it should replace the element

[acywatson]

I suspect this is your problem: https://stackoverflow.com/questions/51860043/javascript-es6-typeerror-class-constructor-client-cannot-be-invoked-without-ne

Have you tried targeting a later version of javascript in your transpilation? Or is there a reason why you need to target es6?

[The-Code-Monkey]

My tsconfig is targeting esnext not es6

[The-Code-Monkey]

Also it builds fine it's just when I use it in another package

[acywatson]

My tsconfig is targeting esnext not es6

Ah, I see - I missed the base config you extended.

Also it builds fine it's just when I use it in another package

I'd expect the transpilation to work fine, anyway. You'd see a runtime error (which is what you're seeing, right?).

Do you think you could provide a stack trace? I can't repro this in the playground with the same setup (another thing pointing to an environment/build issue).

[The-Code-Monkey]

@acywatson I've posted a minimal reproduction using code sandbox issue happens there for me, anything that is currently on the GitHub link I sent is that package version that's in the code sandbox

[The-Code-Monkey]

Another thing to note I have tested it locally using storybook and all is fine. All I can guess is that my rollup build command is breaking something but I wouldn't have thought so.

[acywatson]

Hmm - one quick test could be to search the built files for "TextNode.call" and see if that's happening anywhere.

[The-Code-Monkey]

Hmm ok I'll try that tomorrow. It would be nice to see a working example of this sort of feature as even their own playground doesn't show this off

[The-Code-Monkey]

@acywatson there is a textnode.call in the cjs built file but only within the extendedTextNode constructor where you would expect it to be.

I cannot find the same thing in the esm version.

[acywatson]

@acywatson there is a textnode.call in the cjs built file but only within the extendedTextNode constructor where you would expect it to be.

I cannot find the same thing in the esm version.

I might be getting confused - should there be a TextNode.call? I think the whole source of the error is that TextNode is an ES6 class and therefore must be instantiated with new, as opposed to using Function.prototype.call.

[The-Code-Monkey]

Switching to tsc fixed this

…

On Fri, 1 Mar 2024, 19:32 Acy Watson, ***@***.***> wrote: @acywatson <https://github.com/acywatson> there is a textnode.call in the cjs built file but only within the extendedTextNode constructor where you would expect it to be. I cannot find the same thing in the esm version. I might be getting confused - should there be a TextNode.call? I think the whole source of the error is that TextNode is an ES6 class and therefore must be instantiated with new, as opposed to using Function.prototype.call. — Reply to this email directly, view it on GitHub <#5647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHOFWX57OYD23Q34L3U4T4LYWDJT3AVCNFSM6AAAAABDVACW3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZTG44TKNRYGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>