TypeError: Cannot set property Editor of #<Object> which has only a getter

imranbarbhuiya commented 1 year ago

What’s the bug you are facing?

I've just updated tiptap to ^2.0.0-beta.212 and my build is failing with error

🕙 09:17 ❯ yarn build
unocss v0.49.4                                                                                                             09:17:14
start UnoCSS for production...                                                                                             09:17:14
√ 510 utilities generated to src/styles/unocss.css                                                                         09:17:14

info  - Loaded env from D:\Discord\Sofi-Site\apps\website\.env.production
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build
info  - Compiled successfully
info  - Skipping linting
info  - Checking validity of types
info  - Collecting page data ...TypeError: Cannot set property Editor of #<Object> which has only a getter
    at Object.<anonymous> (D:\Discord\Sofi-Site\node_modules\@tiptap\react\dist\index.cjs:437:49)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (D:\Discord\Sofi-Site\node_modules\@mantine\tiptap\cjs\Content\Content.js:7:13)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)

> Build error occurred
Error: Failed to collect page data for /profile/[userId]
    at D:\Discord\Sofi-Site\node_modules\next\dist\build\utils.js:963:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
info  - Collecting page data .

Which browser was this experienced in? Are any special extensions installed?

At build time

How can we reproduce the bug on our side?

running yarn build in below link should show the error but instead, it's showing #3689

Can you provide a CodeSandbox?

https://codesandbox.io/p/sandbox/vibrant-shtern-xo60cz?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A8%2C%22startColumn%22%3A6%2C%22startLineNumber%22%3A8%7D%5D

What did you expect to happen?

It should pass

Anything to add? (optional)

I'm guessing it's an issue with the new build setup

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

jambonn commented 1 year ago

Same issue

simllll commented 1 year ago

I can build it, but during runtime it fails: Cannot set property Editor of #<Object> which has only a getter

webpack 4
using it with vue2 (@tiptap/vue-2)

bdbch commented 1 year ago

It seems like this is connected to the CJS bundle. I'll see that we fix it today in time for the weekend.

simllll commented 1 year ago

Found something simliar on esbuild, could this be helpful? https://github.com/evanw/esbuild/issues/587

bdbch commented 1 year ago

Thanks for that find @simllll - will take a look and see if we can fix it / implement a quick fix with tsup.

raskyer commented 1 year ago

I think a revert / rollback would be a good strategy since this release is simply not working and might just blew pipeline (it was the case on the site of one of my client and I hade to remove the dependency just to be sure it doesn't go up to beta 212)

simllll commented 1 year ago

same issue with 2.0.0-beta.211

last working version is 2.0.0-beta.209

bdbch commented 1 year ago

From what I've seen is that this issue comes from esbuild not handling multiple exports coming from the Editor.ts of @tiptap/react and the Editor.ts of @tiptap/core which is also exported from the entry file.

I'll set some focus on this issue for today to see if we can get around this problem without doing a hard rollback back to the pre-@tiptap/pm stage because that would bring a lot of confusion with it and I'd save it as a last resort action.

bdbch commented 1 year ago

Just a quick question - what setup are you running? I think most new project setups use the new esmodules and not the CJS module. Were your projects generated by an older @vue/cli version?

simllll commented 1 year ago

We are using nuxt2 with vue2. There is webpack4 used behind the scene.

jambonn commented 1 year ago

@bdbch I'm using vite 2.9.15 with vue3

bdbch commented 1 year ago

Thanks, I'll spin up my own setup then and test around. I'll report back when I find something!

imranbarbhuiya commented 1 year ago

Just a quick question - what setup are you running? I think most new project setups use the new esmodules and not the CJS module. Were your projects generated by an older @vue/cli version?

I'm using nextjs which is using webpack5 and even with type: module, webpack adds a package json inside of .next folder with type: commonjs and resolves cjs files

timheerwagen commented 1 year ago

Same problem here in Next.js and also with jest

fzaninotto commented 1 year ago

Note that beta-213 does not fix this issue. And due to the way dependencies are handled, it's not possible to specify a previous version in package.json...

bdbch commented 1 year ago

I'm looking into this issue right now. Problem is we could delete the released package versions for everything from NPM but would lead to a lot of confusion with the current documentation & the core issue of older Tiptap versions using newer package dependencies would still persist since as mentioned in #3710 Tiptap never used specific pinned versions for it's dependencies before.

I am currently trying to reproduce said error with older Vite setups and Vue 3 on my local machine so I can actively work on it/test the result.

If this does not work out I'll discuss internally if we should revert our versions / changes.

@fzaninotto would this work for you in the meanwhile? https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

fzaninotto commented 1 year ago

Thanks for looking into it.

npm overrides and yarn resolutions don't work in our case, as we publish a framework that uses workspaces. Each workspace is published as an individual package (checkout marmelab/react-admin to get a glimpse). yarn resolutions only work for the topmost package.json, which we only use in development. So we cannot enforce overrides/resolutions on our side. As a result, all the installations without a lock file since version 210 fail, without any workaround.

bdbch commented 1 year ago

I see. Sorry for that. I just opened a PR that should be merged by tomorrow which should revert this back to the old state. If the code base is stable again we'll discuss the following changes:

Pinning Tiptap dependencies by specific versions (for example @tiptap/react@2.0.0-beta.214 only accepting @tiptap/extension-bubble-menu@2.0.0-beta.214) and vice versa
Getting Tiptap closer to a stable release number so we can follow the Semver approach again. This way we can work on larger, breaking changes on a separate alpha/beta release than our hotfixes/minor changes which we can do directly on the main semver versions

bdbch commented 1 year ago

I just released 2.0.0-beta.214 which uses our old build process with a few minor changes and the new PM package. Would be nice to see if this fixes the issues introduced by the esbuild builds.

imranbarbhuiya commented 1 year ago

Closing this issue as it's now fixed in the latest version.

ueberdosis / tiptap