Cannot find module '@emotion/stylis' from 'create-emotion/dist/index.cjs.js

[AlexandreBourdeaudhui]

• emotion version: ^9.2.8
• react-emotion version: ^9.2.8
• react version: ^16.5.0

Relevant code.

/*
 * Package Import
 */
import React from 'react';

/*
 * Local Import
 */
import styled from 'react-emotion';

/*
 * Style
 */
const Test = styled.div({
  color: '#ee1125',
});

/*
 * Component
 */
const App = () => <Test>Hello World !</Test>;

/*
 * Export
 */
export default App;

What you did:

What happened:

app.js:61 Uncaught Error: Cannot find module '@emotion/stylis' from 'create-emotion/dist/index.cjs.js'
    at require (app.js:61)
    at expanded (app.js:34)
    at app.js:148
    at index.cjs.js:12
    at index.cjs.js:529
    at initModule (app.js:42)
    at require (app.js:59)
    at expanded (app.js:34)
    at app.js:148
    at index.cjs.js:11

Reproduction:
Repository for reproduction : https://github.com/AlexandreBourdeaudhui/RepoBug

Problem description:
Sorry if this problem have already a patch, but i dont see anything in closed issues... Also, if i run my project with emotion@9.1.3 ; i don't have problem and my app can run correctly 🤔

Suggested solution:

[Ailrun]

I think it's your bundler's fault, since it does bundle @emotion/stylis/dist/stylis.cjs.js, but it does not alias it as @emotion/stylis.

[AlexandreBourdeaudhui]

Hello @Ailrun 👋

Sorry but i don't understand... It's the Brunch's fault ? Why ? Can you explain me ? 🙏

[Ailrun]

@AlexandreBourdeaudhui When you check your bundled code, you can see there is @emotion/stylis/dist/stylis.cjs.js but no alias to @emotion/stylis. We, as library authors, cannot control such things.

[AlexandreBourdeaudhui]

@Ailrun Thanks for clarification, i understand now.
I'm using Webpack now, and i don't have any problem. So, i can close this issue.

Best regard 👋

[mavlikwowa]

I got a similar error when used NextJS. I solved this problem just run yarn dev again. You should do it after install npm-packages.

[eric-burel]

I hit a similar issue with Next 11.3 and @next/mdx specifically, it doesn't seem to affect other pages. More precisely stylis is not found by @emotion/cache. It happens only on Vercel though, not locally.
See vercel/next.js#24700

[OR13]

I had a similar error triggered in components that used material ui, that were trying to be rendered server side, but only when defining:

export async function getServerSideProps(context: any) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

Caused this error, but only on vercel.

I resolved this issue by pinning in package.json:

 "next": "v11.1.3-canary.45",

and updating next config:

 webpack5: false,
 experimental: {
    outputFileTracing: true,
  },