Emotion: v11: and import/reference to useTheme fails in tests: TypeError: stylis.middleware is not a function

[ehahn9]

Current behavior:

I've upgraded to the wonderful v11 (thanks for your great work, btw!). Alas, any attempt to import useTheme from within
a [jest] test fails for me with TypeError: stylis.middleware is not a function.

To reproduce:

# useTheme.test.ts
import { useTheme } from '@emotion/react';

it('should be defined', () => {
  expect(useTheme).toBeDefined(); // FAILS: TypeError: stylis.middleware is not a function
});

Note that just the import + reference to useTheme fails, we're not even invoking useTheme() here.

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.0.0

[ehahn9]

btw, the stack trace is:

      at Object.createCache [as default] (node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:271:29)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-element-c9fc8903.cjs.dev.js:27:84)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-react.cjs.dev.js:7:22)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-react.cjs.js:6:20)

which makes me wonder if I'm somehow importing the cjs instead of the es6 module?

[Andarist]

Could you prepare a runnable repro case? Please also list your environment information like node version etc

[ehahn9]

Hmmm... first attempt to reproduce using codesandbox -- works perfectly (of course!) so feel free to close this since it looks to be something in my environment... I'll let you know what I find and re-open as needed. apologies if this ends up being a a newbie error!

[ehahn9]

update: looks like the problem occurs when using react-scripts 3.4.4. Problem goes away with react-scripts 4.0.0. I'm fine with closing this, although it might be worth documenting the upgrade requirement?

Here's the repo with 3.4.4 which fails, btw: https://github.com/ehahn9/usetheme

[Andarist]

This is an issue with CRA 3.4.4 that loads unknown extensions as simple strings:
https://github.com/facebook/create-react-app/blob/6c009edface3ed63d0c7046f088c675a63c82fdb/packages/react-scripts/scripts/utils/createJestConfig.js#L47-L49
Note how in CRA 4.0 this already contains .cjs extension:
https://github.com/facebook/create-react-app/blob/v4.0.0/packages/react-scripts/scripts/utils/createJestConfig.js#L48-L50

This doesn't match the default behavior of node - node always (and always has been) tries to load unknown extensions as javascript files. I understand why CRA wants to special-case some extensions like .svg, .png etc but this rule being a catch-all for all "unknown" extensions breaks the compatibility with node.

I'm fine with closing this, although it might be worth documenting the upgrade requirement?

It might be worth documenting somewhere, but I'm not sure where that should be. I will also check if we maybe could just use .js in Stylis as that would resolve this issue as well.

[Andarist]

My PR to Stylis (https://github.com/thysultan/stylis.js/pull/241) has been merged so hopefully with the new release this won't be a problem anymore.

[el-ethan]

If my understanding is correct, and the changes from https://github.com/thysultan/stylis.js/pull/241 do resolve this issue, we will still need to wait for stylis to publish a new version to npm, right? Is there a workaround in the meantime? Thanks!

[Andarist]

I would recommend using https://github.com/ds300/patch-package . Gonna remind Sultan about doing a new release soon though

[puglyfe]

Thanks for the recommendation on patch-package @Andarist.

For anyone else who takes that path, here is a patch that got things working for me - https://gist.github.com/puglyfe/2961514970031368bee74297b4415eea It should hold you over until the new versions are published.

[bmatzner]

Installing stylis from master branch as a dependency worked for me:

"stylis": "github:thysultan/stylis.js#master",

[Andarist]

The fix for this issue has just been released in [email protected]

[bmatzner]

Thanks so much!

[neefrehman]

I'm still getting this error when running component tests that rely on the ThemeProvider, even after installing stylis > 4.04. I have a minimal repro here: https://github.com/neefrehman/emotion-bugs.

Been struggling with it for a while but nothing I've tried has worked. Run npm install && npm run test to see the errors.

 FAIL  src/components/Card/Card.spec.tsx
  ● Test suite failed to run

    TypeError: stylis.middleware is not a function

      1 | import React from "react";
      2 | import type { ReactNode } from "react";
    > 3 | import { ThemeProvider } from "@emotion/react";
        | ^
      4 | import type { AppProps } from "next/app";
      5 | 
      6 | import { GlobalStyles } from "styles/GlobalStyles";

      at Object.createCache [as default] (node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:272:29)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-element-cb6e9ca7.cjs.dev.js:26:84)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-react.cjs.dev.js:7:22)
      at Object.<anonymous> (node_modules/@emotion/react/dist/emotion-react.cjs.js:6:20)
      at Object.<anonymous> (src/pages/_app.tsx:3:1)
      at Object.<anonymous> (src/utils/tests/test-utils.tsx:8:1)
      at Object.<anonymous> (src/components/Card/Card.spec.tsx:2:1)

[Andarist]

@neefrehman I don't quite have time to track this down but for some reason, Jest loads Stylis v3 which is only installed there because of the styled-jsx package - this should not happen with an unaltered resolution algorithm (something is enforcing a custom module resolution algorithm)

[neefrehman]

@Andarist thanks for looking into it. looks like that must be Next.js

[Joaoviana]

@neefrehman I had a similar issue when running next dev and fixed it by upgrading "@storybook/react": "^6.1.17"... Hope this helps you somehow...

[neefrehman]

@Joaoviana thanks for the tip! My branch is already on 6.1.17, and the issue is there sadly :(

I did notice that uninstall storybook leads to a slightly different issue however (React.createContext is not a function), so that's something! I don't suppose you have a link to the commit that solved the problem? Just so I can see if any other config might help.

[Joaoviana]

Unfortunately, I am not able to share @neefrehman , but happy to share more of my packages versions(that we both share/or that you might find useful):

"devDependencies": {
    "@emotion/react": "^11.1.5",
    "@storybook/addon-a11y": "^6.1.15",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.7",
    "@storybook/addons": "^6.1.11",
    "@storybook/react": "^6.1.7",
    "babel-loader": "^8.2.1",
    "jest": "^26.6.3",
  },
  "dependencies": {
    "@chakra-ui/react": "~1.0.3",
    "@emotion/styled": "^11.0.0",
    "@next/env": "^10.0.1",
    "next": "10.0.1",
    "next-compose-plugins": "^2.2.1",
    "next-offline": "^5.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
  }

[nisarhassan12]

I had a similiar issue in a Next JS project I got if fixed via removing./node_modules and .next and then running yarn install, yarn build and then yarn dev.

[neefrehman]

@Joaoviana @nisarhassan12 thanks for the help! sadly the issue is still there after a bit of mucking around. I'll need to take a deeper look at some point soon and will update this issue if I find a fix.

[jereddanielson]

@Joaoviana @nisarhassan12 thanks for the help! sadly the issue is still there after a bit of mucking around. I'll need to take a deeper look at some point soon and will update this issue if I find a fix.

Not sure if it's relevant to you but I was able to solve the issue described on this page by checking my Jest config and removing moduleDirectories: ['.', 'src', 'node_modules'] from jest.config.js. I'm not sure why that line was there originally, tests seem to run fine without it and finally solves my problem with emotion v11.

I'd recommend going through your Jest config line by line - remove a line, run tests, see if it helps. That's literally what I did and it helped narrow down the problem.

Good luck.

[neefrehman]

@jereddanielson thanks so much! gust fiddled around with that config property to get it working. looks like removing '.' from the array did the job. that's a massive load off my mind now as I was really lost. now to start writing those tests.

thanks again!