[Bug]: default import not importing properly with esm + ts-jest

[blainelewis1]

Version

27.1.3

Steps to reproduce

1. Import a package like @emotion/styled that has a default export in a code file
2. Try to access that default export, such as by calling the function.

import React from "react";
import styled from "@emotion/styled";

console.log(styled);

const RedButton = styled.button`
  background-color: red;
`;

const Hello = () => {
  return (
    <div>
      <RedButton />
    </div>
  );
};

export default Hello;

3. Run a test that imports that file.

Expected behavior

I expect the package to be imported properly and not hidden behind another layer of default. When using other build tools it works properly.

It should be able to import and run the file properly.

Actual behavior

The module is not imported properly, the contents are hidden behind a key on an object called default.

Minimal repro: https://github.com/blainelewis1/jest-default-esm-repro

(node:76665) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  console.log
    {
      default: [Function: bound createStyled] {
        a: [Function (anonymous)],
        ...
        tspan: [Function (anonymous)]
      }
    }

      at src/index.tsx:4:9

 FAIL  src/index.test.tsx
  ● Test suite failed to run

    TypeError: styled.button is not a function

      4 | console.log(styled);
      5 |
    > 6 | const RedButton = styled.button`
        |                                ^
      7 |   background-color: red;
      8 | `;
      9 |

      at src/index.tsx:6:32
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)

Additional context

No response

Environment

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 17.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
  npmPackages:
    jest: ^27.5.1 => 27.5.1

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[maddijoyce]

Hi @blainelewis1 did you resolve this by any chance? I'm coming across the same issue where emotion/styled seems to be wrapped in 2 default keys.

[blainelewis1]

@maddijoyce unfortunately I wasn't able to resolve the issue. It's for a side project so I haven't had much time (or really any idea where to start). I was wondering if maybe the ts compiler is reading the wrong tsconfig file and ignoring a setting like allowSyntheticDefaultImports:true. So I tried import styled as * from... which didn't help either. Would love more direction if you have any ideas, I'm not even really sure where the issue lies.

[maddijoyce]

Alrighty @blainelewis1 I'm circling back around on this, since I did a bit more investigation. I managed to reproduce the issue using just emotion/styled and an esm package in node 16 - https://github.com/maddijoyce/emotion-esm-issue - so it looks to be an issue with how emotion works with the newer node esm stuff. I'm going to throw up an issue on the emotion repo.

In the meantime, if you're looking to resolve this issue just in your jest tests (like I am), you can use this fairly hacky workaround 😄

Add a new file (say emotion-styled.js)

import styled from "@emotion/styled/dist/emotion-styled.cjs.dev";
const styled2 = styled.default;
export default styled2;

Then add to your jest.config:

{
   ...,
   moduleNameMapper: {
    "@emotion/styled$": "./emotion-styled.js"
  }
}

Alternatively, if your tests don't need to use es modules (mine do), you could just remove this node option --experimental-vm-modules

[SimenB]

Yeah, fake default exports (as produced by babel, tsc etc) never work well with native ESM. Regardless, issue in emotion, not here

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.