Reactivesearch: Installing the latest emotion version breaks the design of components like DataSearch

[kud]

All is in the title. :)

Example of DataSearch:

[MarttiR]

I think this warning is related, it's shown since [email protected]

index.js:1 Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}` 

Some affected components from stack traces:

    in Styled(Component) (created by URLParamsProvider)
    in URLParamsProvider (created by Anonymous)

    in Styled(div) (created by DataSearch)
    in DataSearch (created by Anonymous)



md5-afd933b96ebb577f11261c2a0ce8789d



    in Styled(input) (created by Downshift)
    in Downshift (created by DataSearch)
    in DataSearch (created by Anonymous)



md5-afd933b96ebb577f11261c2a0ce8789d



    in Styled(div) (created by Downshift)
    in Downshift (created by DataSearch)
    in DataSearch (created by Anonymous)

[divyadeep-MT]

Has anyone been able to find solution to this bug?

[MarttiR]

This is not exactly a forward-looking solution, but partially downgrading to emotion@9 seems to work.

package.json:

  "dependencies": {
    "@appbaseio/reactivesearch": "^3.2.4",
    "@emotion/core": "^10.0.27",
-    "emotion": "^10.0.27",
-    "emotion-server": "^10.0.27",
+    "emotion": "^9.2.12",
+    "emotion-server": "^9.2.12",
    "emotion-theming": "^10.0.27"
  },
  "devDependencies": {
    "@emotion/babel-preset-css-prop": "^10.0.27",
    "babel-plugin-emotion": "^10.0.27"
  }

There may be lingering issues, so YMMV.

[jkhaui]

I don't use emotion on its own, but right now I have 160 errors in my console and I had no idea where they're coming from... I traced it back to ReactiveSearch because they're all the same error of "functions that are interpolate in CSS calls will be stringified" :

Any guidance on how to fix this or what is causing it? Many thanks

[collinwu]

I'm getting a bunch of componentWillMount warnings due to Styled(*) component(s).

I imagine they fixed this in emotion 10 based on this issue

Can reactivesearch update to emotion 10 to fix/address the warnings?

[jyash97]

Hey Guys,

Firstly thanks for helping us in finding issues like this. Currently, we are working on this issue, as this will involve us to change import and the way we have styled the components. This can take time 🕐 . I will keep you posted once we have an initial PR setup ( should be soon 🔜 ).

Thanks again for helping the ReactiveSearch community in every way possible 😄

[jyash97]

Update 👋

This issue is fixed with #1477, #1478, #1480. Now there are no console errors or warnings when used with React.StrictMode.

We have removed the dependency of emotion & react-emotion and are now using latest versions of @emotion/core & @emotion/styled.

This fix is released in version 3.10.1 🚀