udecode
Plate: It looks like there are several instances of 'styled-components' initialized in this application.
Starting with Version 4.0.0. I encounter the bug "It looks like there are several instances of 'styled-components' initialized in this application."
If I use Version 3.5.1 or prior the bug does not occur.
See Codesandbox: https://codesandbox.io/s/lingering-water-o24h4 In your Codesandbox the error is the same: https://codesandbox.io/s/plate-playground-v1-2mh1c
Expectation The error should not be happening in the console
Hi!
I am using latest version 8.3.1, and I am still having this warning:
It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.
Styled-components are only used on this lib. I would appreciate if you can help me.
In another hand, I have tried to install only the packages that I need, but I couldn't find a way to import the createPlateUI method without intalling @udecode/plate. Where is it exposed?
I attach the package.json and the yarn.lock just in case it is useful.
packageJson_yarnLock.zip
It is exported by @udecode/plate. Next release will publish 2 new packages: plate-headless (unstyled) and plate-ui (both exported by @udecode/plate
I'm still experiencing this issue when trying to use createPlateUI exported from plate-ui.
Following #913, window["styled-components-init"] shows 3.
Adding the following imports to a project using styled-components shows 2 after:
import a from '@udecode/plate-headless'
import b from '@udecode/plate-styled-components'
import c from "@udecode/plate-ui-alignment"
import d from "@udecode/plate-ui-block-quote"
import e from "@udecode/plate-ui-code-block"
import f from "@udecode/plate-ui-combobox"
import g from "@udecode/plate-ui-dnd"
import h from "@udecode/plate-ui-find-replace"
import i from "@udecode/plate-ui-font"
import j from "@udecode/plate-ui-image"
import k from "@udecode/plate-ui-line-height"
import l from "@udecode/plate-ui-link"
import m from "@udecode/plate-ui-list"
import n from "@udecode/plate-ui-media-embed"
import o from "@udecode/plate-ui-mention"
import p from "@udecode/plate-ui-placeholder"
import q from "@udecode/plate-ui-popper"
import r from "@udecode/plate-ui-table"
import s from "@udecode/plate-ui-toolbar"
import t from "@udecode/plate-ui-button"
import u from "@udecode/plate-ui-popover"
and commenting out plate-ui-table and plate-ui-popover gets back down to 1
It looks like some modules are still creating their own instances of styled-components
I'm having this problem, and my project doesn't use styled-components at all. My console warning points to plate-ui-popover via plate-ui-table for me as well, neither of which I'm using.
The only difference I can see in between plate-ui-popover and other plugins is that plate-ui-popover doesn't have "styled-components": ">=5.0.0" as a peerDependency. Could that be the issue?
Ditto 10.8.0
This issue is of particular concern to those using next js > 12.1 as this is causing issues with SSR
@zbeyens This is still the issue for plate v16
"@udecode/plate": "16.0.1",
"@udecode/plate-core": "16.0.0",
"@udecode/plate-link": "16.0.0",
"@udecode/plate-ui-toolbar": "16.0.0",
Only two calls. But enough to trigger the warning.
Both coming from @udecode/plate/node_modules/@udecode/plate-ui/dist/index.es.js file
The first is from this import, so styled-components gets initialized
import { css } from 'styled-components';
The second call is due to this code in the same file:
"production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"), "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window["__styled-components-init__"] = window["__styled-components-init__"] || 0, 1 === window["__styled-components-init__"] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window["__styled-components-init__"] += 1);
So it seems the styled-components are referred to as module from node_modules, but also bundled into index.es.js, which triggers double initialization.
styled-components is gone 🎉
Fixed in v22 https://github.com/udecode/plate/pull/2472