Importing packages written ESM

Is it possible to import packages that are written in ESM? For example in my TypeScript project I have a dependency to react-dates@next which is written in ECMAScript module syntax (import / export). In my webpack build everything works fine because webpack understands natively ESM. But in my Jest tests I get SyntaxError: Unexpected token import in

/my/project/node_modules/date-fns/esm/addDays/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import toDate from '../toDate/index.js'

One solution would be to include babel-jest as it’s written in the official Jest docs and modify my config to

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.tsx?$": "ts-jest"
},

This works in my case but I don’t want to clutter my project with Babel stuff just for tests. Additionally the tests are getting really slow and Babel complains with

[BABEL] Note: The code generator has deoptimised the styling of "/Users/me/development/my-project/node_modules/ty
pescript/lib/typescript.js" as it exceeds the max of "500KB".

So it seems that Babel is transpiling *all my dependencies.

Is it possible to achieve the same with ts-jest? I also tried to modify my tsconfig.json to let TypeScript compile to "module": "commonjs" and set "transformIgnorePatterns": ["<rootDir>/node_modules/react-dates"] but this doesn’t work. It seems that the source files from date-fns doesn’t get passed to ts-jest. I could provide a small test project if you want.

[frankwallis]

I think this does work but you need to get jest to transform these files using ts-jest - by default no files under node_modules are transformed but you can change this with configuration:

    "transformIgnorePatterns": ["node_modules/(?!(antd|rc-))"],

Will feed node-modules/antd/* and node_modules/rc-*/** through the transpiler. All other files under node_modules will be excluded as before.

Then you need to tell ts-jest to transpile javascript files, so in tsconfig.json add

   "allowJs": true

[noodletired]

Hey @damianobarbati I ran into your issue with nanoid today. Since that package doesn’t have a CommonJS export, I found using the ts-jest transform preset js-with-ts solved the issue as it transforms all files to CommonJS. Transpiling JS files with Babel could also work e.g. via the js-with-babel preset.

You’ll need to add transformIgnorePatterns with an exclude pattern to ensure nanoid and other ES modules in node_modules get picked up. Also helps to have checkJS: false in your tsconfig set (at least for deps) to avoid error spam.

	preset: 'ts-jest/presets/js-with-ts',
	transformIgnorePatterns: ['/node_modules/(?!nanoid)'], // add other ES deps to exclude pattern if they cause trouble