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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 23 (6 by maintainers)

Most upvoted comments

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.

+25

nisarhassan12 on Feb 14, 2021

@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.

jereddanielson on Mar 11, 2021

@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!

neefrehman on Mar 13, 2021

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

Andarist on Nov 20, 2020

Hi, i have updated all emotion dependencias to the latests version and checking the installed dependencies i have stylis@4.0.4 installed, when i try to run the tests i get:

I dont know if stylis compiler makes some change in the React import or something but i can’t make it work. Is there any new about it?

I have Next dependencies intalled that maybe is affecting because it has stylish@3.5.0.

Has anyone have this problem?

ivan-rodriguez-ag on Jun 8, 2021

@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.

neefrehman on Feb 12, 2021

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

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

bmatzner on Nov 25, 2020