[Bug]: Unexpected token 'export' when Jest test imports d3 (7.1.1)

[maistrotoad]

Version

27.3.1

Steps to reproduce

We use Typescript, if our test file (*.spec.ts) contains the following import

import { scaleLinear } from 'd3';

Expected behavior

Test runs without problems

Actual behavior

Running the test will give the following error:

.../node_modules/d3/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "d3-array";
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

Additional context

The issue started when updating Jest from 26.6.3 to 27.3.1.
I finally found a workaround for this. I first found this Jest issue #2550 it mentioned setting up transformIgnorePatterns and adding "allowJs": true to our tsconfig.json. This did not work, what did solve it in the end was adding the following to our jest.config.js:

    moduleNameMapper: {
        'd3': '<rootDir>/node_modules/d3/dist/d3.min.js',
    },

Which makes it import from that minified file instead of node_modules/d3/src/index.js. Not sure if it is reasonable and possible for Jest to import from a module's dist folder when it cannot import from the index file? Also not sure if this is an issue with d3 or a mismatch with all the different ways in which you can express JavaScript (ESM/CommonJS/...)?

Environment

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
  Binaries:
    Node: 14.16.1 - /tmp/fnm_multishells/13239_1636009783566/bin/node
    npm: 6.14.12 - /tmp/fnm_multishells/13239_1636009783566/bin/npm
  npmPackages:
    jest: 27.3.1 => 27.3.1

[rememberlenny]

I had the same problem yesterday.

[AshtarCodes]

I'm having this problem as well with the "unified" module, which is an ESM only module. This is on Node v12 on a recent MacBook Pro. [email protected]

[istvandesign]

I have a React project created with Nx and I am using TypeScript, I have [email protected] and I also receive the same error. I tried transformIgnorePatterns, which didn't work.

[maistrotoad]

@istvandesign did the workaround I ended up with work for you?

so adding this to your jest config:

moduleNameMapper: {
    'd3': '<rootDir>/node_modules/d3/dist/d3.min.js',
},

[tschleuss]

I had to use the transformIgnorePatterns in one of my projects..

"transformIgnorePatterns": [
    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
],

I had to do this with multiple modules.

[guscsales]

@istvandesign did the workaround I ended up with work for you?

so adding this to your jest config:

moduleNameMapper: {
    'd3': '<rootDir>/node_modules/d3/dist/d3.min.js',
},

mapping the d3 to the final bundle worked for me since the jest does not need to compile ESModule anymore. Thanks!

[eckdanny]

ran into this issue in a typescript project using jest@27 with a few d3-* (ESM) dependencies. No luck fiddling with #transformIgnorePatterns, but arrived at same general workaround as @maistrotoad with #moduleNameMapper:

  moduleNameMapper: {
    ...
+   "^d3-(.*)$": `d3-$1/dist/d3-$1`
  }

I'm not sure if all d3-* pkgs are similarly structured, but the ones on which my project depends are. Hopefully we won't need to revisit when we add another.

[SimenB]

d3 should add a require condition (https://www.runpkg.com/[email protected]/package.json#32), then Jest 28 (via #9771) will support this.

beyond that, this is a usage question and not a bug, so closing this

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