Installing the library causes emotion error

[JohannesKlauss]

Installing this library and using it in conjuncture with either next.js or storybook causes emotions errors during the startup of dev servers.

Using next.js I get this error:

next-translate - compiled page: /albums/new - locale: en - namespaces: common - used loader: getStaticProps
error - TypeError: stylis.middleware is not a function
    at Object.createCache [as default] (/Users/johannesklauss/Documents/Github/Syra/node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:331:30)
    at EmotionGlobal (/Users/johannesklauss/Documents/Github/Syra/node_modules/@emotion/react/dist/emotion-element-ce965253.cjs.dev.js:59:48)
    at processChild (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/johannesklauss/Documents/Github/Syra/node_modules/next/dist/server/render.js:596:45)
    at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:194:19)
    at Object.loadGetInitialProps (/Users/johannesklauss/Documents/Github/Syra/node_modules/next/dist/shared/lib/utils.js:69:29)

Using storybook I get this error:

bootstrap:27 Uncaught TypeError: (0 , stylis__WEBPACK_IMPORTED_MODULE_0__.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:287)
    at Object../node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js (emotion-element-99289b21.browser.esm.js:17)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (emotion-serialize.browser.esm.js:314)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@storybook/theming/node_modules/@emotion/styled/dist/styled.browser.esm.js (memoize.browser.esm.js:9)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)

The weirdest thing is that this also happens when I am not even using the library. Only when I remove the library the errors go away.

I have the following setup (the next.js app gets bundled with webpack5):

"@chakra-ui/react": "1.6.10",
"@emotion/react": "11.5.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"chakra-react-select": "1.3.2",
"framer-motion": "4.1.17",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",

And I am using Storybook with webpack5:

"@storybook/addon-essentials": "6.3.0",
"@storybook/addon-knobs": "6.3.1",
"@storybook/addon-links": "6.3.0",
"@storybook/builder-webpack5": "6.3.0",
"@storybook/manager-webpack5": "6.3.0",
"@storybook/react": "6.3.0",

Chakra itself works fine and is correctly setup. Only after installing this library the error occurs. Any idea what might causing it?

[csandman]

This is definitely strange, I also use next.js primarily when I use this package and haven't run into this issue. I have a few questions to clarify your setup:

• Are you using the standard next.js build tools/config or do you have any custom settings?
  • If you are using a custom config, can you share a copy of your config? You don't need to include any sensitive data like url's or rewrite paths if you don't want to.
• Are you having issues running the dev server, or running a built version?
• Is storybook installed in the same project or a separate one? And are those storybook packages dependencies or dev dependencies, I'm not super familiar with storybook.
  • If they're in the same package, could I see your full dependencies list? or if not can I see your full dependency list of the next.js project as a place to start?
• What are you using @emotion/server for? I've never needed that dependency with chakra before so I'm curious.

This could definitely be an issue of duplicate instances of emotion, both @chakra-ui/react and react-select use emotion so they could be conflicting in your setup somehow.

I tried setting up a test project with the first dependencies you had listed and I'm not running into any errors. The main thing I'd recommend is trying to run a clean install by deleting node_modules ( rm -rf node_modules or just delete the folder ) and running a clean npm install. If that doesn't work, try deleting node_modules and your package-lock.json before installing and see if that makes a difference. Sometimes chakra gives me issues when installing new packages or updating packages if I don't do a clean install, so that would be my first thought. If that doesn't work, I'll take a deeper dive into why your setup isn't working!

[jonahallibone]

@JohannesKlauss it's a little hard to debug this issue without seeing how you set up your project, although from what I know of emotion/server, I know the set up can be complex with the only benefit being it's more stable with nth child and similar selectors. I'd point you to this repo to make sure your set up is inline with the basic Next.js example. I just set up chakra-react-select in a project set up with that basic Next.js example and couldn't reproduce the issue.

[JohannesKlauss]

Cleaning out the cache, node_modules and/or switching to yarn and run a fresh install fixed the issue. If it pops up again, I'll try to dig a bit deeper, but yeah. Just installing it shouldn't cause any errors, so I am more than confused why this happened. Npm, eh. Thanks your the support!