Importing packages written ESM

[screendriver]

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.

[kulshekhar]

@screendriver I'm not sure about this one way or another. Could you create a minimal repo for this? I'll be happy to take a look at it

[GeeWee]

I think this is because jest by default doesn't transpile anything in node modules.

Perhaps the following could be of assistance: https://facebook.github.io/jest/docs/en/tutorial-react-native.html#transformignorepatterns-customization

[kulshekhar]

That was my first thought as well but then babel-jest seems to be processing that so there must be something else, unless babel-jest processes files other than the ones passed in by Jest

[kulshekhar]

@screendriver do the instructions here work for you? #390 (comment)

[screendriver]

@screendriver do the instructions here work for you? #390 (comment)

@kulshekhar as I wrote in my first post I could use babel-jest as it's written in the official Jest docs but I don't want to clutter my project with Babel stuff just for tests. It does work but it's slow and complains about the file size of typescript.js in my node_modules. Furthermore TypeScript could transpile that stuff as well 😉

I think this is because jest by default doesn't transpile anything in node modules.

True. But there is an Jest option called modulePathIgnorePatterns for that. I tried that out with ts-jest but it does not work. Additionally babel-jest does not need to enable something. It works out of the box and transpiles installed dependencies (I don't know how)

Should I create a repo for you? You can try it out easily by yourself: just install date-fns@next and write a simple test that just imports a function from date-fns/esm. That's all.

[kulshekhar]

The linked comment had an option to solve that issue without babel-jest. I was trying to ask whether that works for you

…

On Fri 22 Dec, 2017, 12:34 Christian Rackerseder, ***@***.***> wrote: @screendriver <https://github.com/screendriver> do the instructions here work for you? #390 <#390> (comment) @kulshekhar <https://github.com/kulshekhar> as I wrote in my first post I *could* use babel-jest <https://github.com/facebook/jest/tree/master/packages/babel-jest> as it's written in the official Jest docs <http://facebook.github.io/jest/docs/en/webpack.html> but I don't want to clutter my project with Babel stuff just for tests. It does work but it's slow and complains about the file size of typescript.js in my node_modules. Furthermore TypeScript could transpile that stuff as well 😉 I think this is because jest by default doesn't transpile anything in node modules. True. But there is an Jest option called modulePathIgnorePatterns <http://facebook.github.io/jest/docs/en/configuration.html#modulepathignorepatterns-array-string> for that. I tried that out with ts-jest but it does not work. Additionally babel-jest does *not* need to enable something. It works out of the box and transpiles installed dependencies (I don't know how) Should I create a repo for you? You can try it out easily by yourself: just install ***@***.*** and write a simple test that just imports a function from date-fns/esm. That's all. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#398 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKR_0K5ZcjdKLTz_d7glKubPztMg-H1Gks5tC1RigaJpZM4RJo_1> .

[screendriver]

Do you mean:

"transform": {
  "^.+\\.(t|j)sx?$": "ts-jest"
}

If yes: yes, I already tried that out as well. Doesn't work 😞

[kulshekhar]

Should I create a repo for you?

that would be very helpful

You can try it out easily by yourself: just install date-fns@next and write a simple test that just imports a function from date-fns/esm.

It's the other config (jest/tsconfig) that I want to ensure matches your setup. That's why a repo would be helpful

[screendriver]

No problem. Here we go 😉

[kulshekhar]

@screendriver I'm seeing the same error if I run tsc and then node build/index.js.

Whatever config can fix this should fix the issue you're facing. This isn't really a 'solution' but it's the best I could think of right now. I'll take a look again after work

[screendriver]

True. Webpack handles that correctly for example and there it works out of the box 😉 But webpack is not Node 🙃

Thanks for your help.

[StoneCypher]

I am having similar problems getting import through typescript under jest, and would appreciate this issue being remembered

[hronro]

Any updates?

[GeeWee]

I haven't had any time to look at it unfortunately :(