Preact: RangeError: Maximum call stack size exceeded using antd Drawer

Created on 11 Jun 2019 · 14Comments · Source: preactjs/preact

Not sure what the error is, i'm trying to use Antd on a project with Preact but can't seem to use Drawer (other components don't work either, like Menu...)

this is what i get from the console on the browser:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Object.createElement (preact-compat.es.js?9cf4:294)
    at Drawer.getChildToRender (Drawer.js?a09f:561)
    at Drawer.render (Drawer.js?a09f:147)
    at callMethod (preact-compat.es.js?9cf4:505)
    at Drawer.eval [as render] (preact-compat.es.js?9cf4:515)
    at renderComponent (preact.js?10a9:271)
    at Drawer.forceUpdate (preact.js?10a9:398)
    at Drawer.componentDidUpdate (Drawer.js?a09f:104)
    at renderComponent (preact.js?10a9:316)
    at Drawer.forceUpdate (preact.js?10a9:398)
Promise.then (async)
enqueueRender @ preact.js?10a9:35
setState @ preact.js?10a9:394
Topbar._this.showDrawer @ index.js?2616:18
Button._this.handleClick @ button.js?f9fc:130
eventProxy @ preact.js?10a9:95

I'm using the example on the Antd website to see if it runs, but no luck... https://ant.design/components/drawer/

My npm install spits out a few react-context warnings, maybe it's because of that!! Any help on solving this?

Thanks,
Tiago

in X

Source

talvasconcelos

👍1

Most helpful comment

@Jossnaz No need to post snarky comments in an issue that's been closed and had no activity for half a year. That's not helpful for anyone.

As @JoviDeCroock already laid out: It's unfortunate that certain libraries rely on internal React features that even the React team doesn't think is stable and thus shouldn't be used except for experimental stuff.

There is nothing stopping antd from using stable APIs instead :+1:

marvinhagemeister on 27 Nov 2019

👍2

All 14 comments

@talvasconcelos This is a bug in the 8.x release line. Can you check if it is fixed with latest Preact X relase (10.0.0-beta.2)? I remember us having fixed that issue a while ago in X.

marvinhagemeister on 11 Jun 2019

Tried removing node_modules, npm i preact@next, then npm i to install the rest in package.json, with preact-compat removed. (project was started with preact-cli)
... "eslintConfig": { "extends": "eslint-config-synacor" }, "eslintIgnore": [ "build/*" ], "devDependencies": { "eslint": "^4.5.0", "eslint-config-synacor": "^1.1.0", "if-env": "^1.0.0", "preact-cli": "^2.0.0" }, "dependencies": { "antd": "^3.19.3", "idb-keyval": "^3.2.0", "preact": "^10.0.0-beta.2", "preact-render-to-string": "^4.1.0" } }

New error:
Uncaught TypeError: Cannot read property 'prototype' of undefined at eval (webpack-internal:///./node_modules/preact-compat/dist/preact-compat.es.js:70) at Object../node_modules/preact-compat/dist/preact-compat.es.js (bundle.js:7251) at __webpack_require__ (bundle.js:679) at fn (bundle.js:89) at eval (webpack-internal:///./node_modules/antd/es/affix/index.js:1) at Object../node_modules/antd/es/affix/index.js (bundle.js:1030) at __webpack_require__ (bundle.js:679) at fn (bundle.js:89) at eval (webpack-internal:///./node_modules/antd/es/index.js:1) at Object../node_modules/antd/es/index.js (bundle.js:1542)

Should i just start over?! how can i have preact X with preact-cli ?

talvasconcelos on 12 Jun 2019

You should use the newer preact-cli version. This one is trying to use preact-compat while it has to be preact/compat.

JoviDeCroock on 12 Jun 2019

Used v2.2.1 with no luck also... I'm sorry i know this must be boring noob stuff, but i'd really like to get this working. don't want to start fresh with react because of this...

talvasconcelos on 12 Jun 2019

Nothing newbie about it, try this npm install --save-dev preact-cli@rc

JoviDeCroock on 12 Jun 2019

@JoviDeCroock it's better but, giving errors!!
this is output of console:
`Compiled successfully!

You can view the application in browser.

Local: http://0.0.0.0:8080
On Your Network: http://192.168.100.115:8080
‼ WARN ./node_modules/rc-editor-mention/es/component/SuggestionWrapper.react.js 39:4-39
"export 'unstable_renderSubtreeIntoContainer' was not found in 'react-dom'
@ ./node_modules/rc-editor-mention/es/component/Suggestions.react.js
@ ./node_modules/rc-editor-mention/es/utils/createMention.js
@ ./node_modules/rc-editor-mention/es/component/Mention.react.js
@ ./node_modules/rc-editor-mention/es/index.js
@ ./node_modules/antd/es/mention/index.js
@ ./node_modules/antd/es/index.js
@ ./components/navbar/index.js
@ ./index.js
@ ./node_modules/preact-cli/lib/lib/entry.js
@ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
‼ WARN ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '.node_modules\moment\src\liblocale'
@ ./node_modules/moment/src/lib/locale/locales.js
@ ./node_modules/moment/src/lib/moment/locale.js
@ ./node_modules/moment/src/lib/duration/prototype.js
@ ./node_modules/moment/src/lib/duration/duration.js
@ ./node_modules/moment/src/moment.js
@ ./node_modules/rc-calendar/es/MonthCalendar.js
@ ./node_modules/antd/es/date-picker/index.js
@ ./node_modules/antd/es/index.js
@ ./components/navbar/index.js
@ ./index.js
@ ./node_modules/preact-cli/lib/lib/entry.js
@ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
‼ WARN BabelEsmPlugin: ./node_modules/rc-editor-mention/es/component/SuggestionWrapper.react.js 39:4-39
"export 'unstable_renderSubtreeIntoContainer' was not found in 'react-dom'
@ ./node_modules/rc-editor-mention/es/component/Suggestions.react.js
@ ./node_modules/rc-editor-mention/es/utils/createMention.js
@ ./node_modules/rc-editor-mention/es/component/Mention.react.js
@ ./node_modules/rc-editor-mention/es/index.js
@ ./node_modules/antd/es/mention/index.js
@ ./node_modules/antd/es/index.js
@ ./components/navbar/index.js
@ ./index.js
@ ./node_modules/preact-cli/lib/lib/entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
‼ WARN BabelEsmPlugin: ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '.node_modules\moment\src\liblocale'
@ ./node_modules/moment/src/lib/locale/locales.js
@ ./node_modules/moment/src/lib/locale/locale.js
@ ./node_modules/moment/src/moment.js
@ ./node_modules/antd/es/time-picker/index.js
@ ./node_modules/antd/es/index.js
@ ./components/navbar/index.js
@ ./index.js
@ ./node_modules/preact-cli/lib/lib/entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server`

And this on browser console:
index.js?c988:368 Uncaught (in promise) RangeError: Maximum call stack size exceeded at O (index.js?c988:368) at C (index.js?c988:201) at Drawer.p.forceUpdate (component.js?dcb2:67) at Drawer.componentDidUpdate (Drawer.js?e4d9:104) at C (index.js?c988:182) at Drawer.p.forceUpdate (component.js?dcb2:67) at Drawer.componentDidUpdate (Drawer.js?e4d9:104) at C (index.js?c988:182) at Drawer.p.forceUpdate (component.js?dcb2:67) at Drawer.componentDidUpdate (Drawer.js?e4d9:104)

I have it working flawless on React btw...

talvasconcelos on 12 Jun 2019

Yes but that library seems to be using something it shouldn't be using namely unstable_renderSubtreeIntoContainer

https://github.com/react-component/editor-mention/blob/master/src/component/SuggestionWrapper.react.jsx#L3

JoviDeCroock on 12 Jun 2019

Thanks so much for your help. at least i know now how to use Preact X ... I'll maybe try to use another library, or styled-components instead...

talvasconcelos on 12 Jun 2019

Going to throw it in the channel if we want to support cases like these in compat but from my point of view, we shouldn't. Things that are marked unstable are that for a reason.

JoviDeCroock on 12 Jun 2019

👍1

@JoviDeCroock i'm getting same error, pulling the plug on preact. Just letting you know.

Jossnaz on 27 Nov 2019

@Jossnaz No need to post snarky comments in an issue that's been closed and had no activity for half a year. That's not helpful for anyone.

There is nothing stopping antd from using stable APIs instead :+1:

marvinhagemeister on 27 Nov 2019

👍2

So for preact X this should be fixed as antd moved to createPortal if it is available.

I just did a small test in our preact demo. Antd Button and Drawer work.

@Jossnaz if you're still experiencing issues please provide a reproduction case. Make sure you have a recent version of antd installed

sventschui on 27 Nov 2019

I checked and I think the problem might be related to a different library
the problem I have mainly that preact seems to throw runtime errors that
aren't helpful.

Your build, passes, you load the page, and something is undefined on line
10327.

You do it with react, and there is no runtime error.

that is very very frustrating

On Wed, 27 Nov 2019 at 10:04, Sven notifications@github.com wrote:

So for preact X this should be fixed as antd moved to createPortal if it
is available.

I just did a small test in our preact demo. Antd Button and Drawer work.

@Jossnaz https://github.com/Jossnaz if you're still experiencing issues
please provide a reproduction case. Make sure you have a recent version of
antd installed

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact/issues/1704?email_source=notifications&email_token=AAPZ36VWD5XU4R2GET57DNDQV2D63A5CNFSM4HXBXLFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFJZARY#issuecomment-559124551,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAPZ36VAWHEKYV65BKGQVXDQV2D63ANCNFSM4HXBXLFA
.

Jossnaz on 28 Nov 2019

We try to be compatible with React and it‘s ecosystem as much as possible. There are differences, otherwise we could not maintain the size difference.

We‘re very happy to help you out if you provide a reproduction case.

That the error is on line 10327 means your setup doesn‘t use sourcemaps as otherwise it‘d give you more precise information. Try to enable them to get better error logging, this will also help to tackle other issues you might experience in the future.

sventschui on 28 Nov 2019

Was this page helpful?

0 / 5 - 0 ratings