Jest with TypeScript and ES modules can't import "named imports" from cjs modules

[themaskedavenger]

🐛 Bug Report

Using TS, exports from CJS modules can be imported with syntax as if they were named ES module exports, e.g.:

import { sync } from 'glob';

However, with Jest and ES modules, when this style of import is in a test file or in a dependency of a test file, it says SyntaxError: The requested module 'glob' does not provide an export named 'sync'

Going through all one by one and changing them to import glob from 'glob'; and then calling glob.sync() seems to work, however when migrating some legacy stuff from another test runner to Jest this may not be an option, because there are a lot of those such imports in the codebase.

Is there a way around this, so that import { whatever } from 'whatever'; will work for CJS modules?

To Reproduce

Steps to reproduce the behavior:

Running jest with: node --experimental-vm-modules node_modules/jest/bin/jest.js (as described in https://jestjs.io/docs/ecmascript-modules), and using Jest config:

  resetMocks: true,
  testEnvironment: "node",
  testMatch: [
    "**/src/**/*.(spec|test).[tj]s?(x)"
  ],
  preset: 'ts-jest/presets/default-esm',
  transform: {},
  'extensionsToTreatAsEsm': [".ts", ".tsx"],
  globals: {
    'ts-jest': {
      useESM: true,
      tsconfig: {
        allowSyntheticDefaultImports: true,
        declaration: true,
        esModuleInterop: true,
        jsx: "react",
        lib: ["esnext"],
        module: "es2020",
        moduleResolution: "node",
        outDir: "build",
        sourceMap: true,
        strictNullChecks: true,
        target: "ES2020",
      }
    },
  }

Expected behavior

import { sync } from 'glob' and similar imports from CJS modules work.

Link to repl or repo (highly encouraged)

https://github.com/themaskedavenger/tsjestcjerepro

envinfo

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 7.7.6 - /usr/local/bin/npm
  npmPackages:
    jest: ^27.0.4 => 27.0.4 

[k2snowman69]

In hopes that it speeds things along and removes any question as to ownership, I forked the repository provided by @themaskedavenger and removed all typescript related stuff to show it's a jest issue.

https://github.com/k2snowman69/tsjestcjerepro

Hopefully this removes any doubt that this is a ts or a ts-jest issue

Tested with node 14.17.1 and node v16.1.0

[k2snowman69]

Okay so dug into this a bit and hopefully my investigation helps whoever ends up fixing this on jest's side.

The first and important thing to note is that jest does not use nodejs to resolve files. This tripped me up a lot until I figured this out. Both jest and nodejs use cjs-module-lexer which uses basic regex to parse a contents of a file to determine what the exported functions are from a cjs library. The owner of that library had a great explanation that helped guide the rest of this investigation. Now what this means is the same package has the possibility of behaving differently between nodejs and jest and that's really important because that gap between the two is going to cause lots of confusion... so using a few examples let's take this package by package...

glob

Glob's export code looks like module.exports = glob which would require an eval on the js code to determine what the exports are. This is why cjs-module-lexer cannot determine the exports, because it's purely basing it off regex for performance reasons required by nodejs. This will fail in both nodejs and jest.

enzyme

Enzyme's export code looks like

module.exports = {
  render: _render2['default'],
  shallow: _shallow2['default'],
  mount: _mount2['default'],
  ShallowWrapper: _ShallowWrapper2['default'],
  ReactWrapper: _ReactWrapper2['default'],
  configure: _configuration.merge,
  EnzymeAdapter: _EnzymeAdapter2['default']
};

however it seems that cjs-module-lexer is only able to extract the first exported function. I commented about this bug in nodejs/cjs-module-lexer#57 and provided a unit test for reproduction. Hopefully we can see it get fixed.

tslib

tslib actually supports cjs, es6 through the module property (non-standard) and ESM through the exports property (node compatible) so this should work.

When running the following code in node in either cjs or esm there are no errors (as expected)

import { __assign } from "tslib";

const d = __assign({ a: "a" });
console.log(d.a);

However when running the following test in Jest ESM:

import { __assign } from "tslib";

test.only("General config is working", async () => {
  const d = __assign({ a: "a" });
  expect(d.a).toBe("a");
});

You'll get the following error:

 FAIL  src/tslib.test.js
  ● Test suite failed to run

    SyntaxError: The requested module 'tslib' does not provide an export named '__assign'

      at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:669:5)

Which means that jest's resolver isn't resolving the same file that node js is resolving that eventually gets sent to cjs-module-lexer so that it can correctly determine the exports.

Summary

Hopefully that gives some guidance to someone who investigates this and maybe we can at least fix this for tslib. To fix this for glob however, you'll need to fix it in cjs-module-lexer. I'd still leave this ticket open to hopefully fix it for tslib though.

[yqrashawn]

This happens to me even with react.
Can't use import {useState} from 'react'
Have to write it this way

import React from 'react'
const {useState} = React

And react-use has the same problem

[smiller171]

Just ran into this myself...incredibly frustrating bug.

[zachkirsch]

+1 I am seeing the same issue with a very similar setup (jest with ESM, relying on named exports from a CJS module).

[OultimoCoder]

Is there no fix for this yet?

[pommelinho]

+1 also wondering if there is a solution for this?

[Amerr]

@k2snowman69 Thanks for your detailed analysis of the root cause of the problem.

Like @yqrashawn i am also facing Jest not able to do perform named export even in react package.

Current Temp solution is to import the whole package default and extract individual exports

import React from 'react'

React.useEffect

But its a pain staking process, and i would like to automate somehow, any suggestion.

[github-actions]

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

[viceice]

not stale

[SimenB]

Can anyone provide an example of where node is able to import using native ESM, but Jest fails?

E.g. React does not support native ESM: facebook/react#11503

[SebastienGllmt]

I can confirm the issue still exists for us. I updated the repo linked by the issue author to the latest version of jest/ts-jest and you can see the issue still persists: https://github.com/SebastienGllmt/tsjestcjerepro

[GeorgeCr]

This happens to me even with react. Can't use import {useState} from 'react' Have to write it this way

import React from 'react'
const {useState} = React

And react-use has the same problem

Had this issue with another package and such approach solved it for me.