Ky: Ky typescript, jest and es modules + temp solution

[belgattitude]

Spend few hours trying to make typescript, jest, lerna and ky to play well together. Here's something that might help in case of:

    export default createInstance();
    ^^^^^^
    SyntaxError: Unexpected token export
    > 4 | import ky from "ky";

With Jest you can simply add it to the transformIgnorePatterns, but the way lerna works your node_modules will probably end up in the top level node_modules. So here's something that seems to works in every cases:

    moduleNameMapper: {
        '^ky$': require.resolve('ky').replace('index.js', 'umd.js'),
    }

This way, jest choose the umd build instead of es one.

Warning, this assumes there will always be an umd.js build packaged with ky.

There might be better solutions, feel free to let me know yours

[sindresorhus]

I would try discussing this on the Jest support forums instead. Ky is just a normal ESM module. The problem lies in how complex Jest and Lerna are.

[plankter]

Same problem with Vue CLI 4 configured as Typescript/Jest/ESLint combo.

ky is the only module that is affected.

[sholladay]

The most likely reason that ky is the only affected module in your stack is simply because there are not yet many other ES6 modules in the npm registry.

I think what you should do is just use CommonJS-style imports with the UMD build everywhere that you depend on Ky, since it's having trouble with the ESM syntax. I don't see a good reason to re-write the path in your config like that. It would be better to use that path in your app and in your tests directly, in my opinion.

So just do this:

const ky = require('ky/umd');

... Instead of ...

import ky from 'ky';

... or any other combination you may be using.

[belgattitude]

@sholladay,

don't see a good reason to re-write the path in your config like that. It would be better to use that path in your app and in your tests directly, in my opinion.

Agree... the reason: you'll loose the typings. Would love to have a better option though.

[sholladay]

We have umd.d.ts with TypeScript types for the UMD build as of v0.7.1. It should work. If not, it might be something we can fix in Ky. It's perfectly reasonable to expect TS support from the UMD build.

[belgattitude]

@sholladay

We have umd.d.ts with TypeScript types

Well, so import ky from 'ky/umd' will actually work (require is not the way to go in ts). But this way defeats the purpose of using esm.

IMO, Jest problem => should be fixed through jest configuration.

The jest way of fixing this is through transformIgnorePattern or moduleNameMapper till jest supports esm.

The most likely reason that ky is the only affected module in your stack is simply because there are not yet many other ES6 modules in the npm registry.

Yes but some popular ones: lodash-es being a good example. tree-shaking really matters here. They went another way, maintaining two repos: lodash and lodash-es but the same logic applies. The common solutions are either to use transformIgnorePatterns or moduleNameMapper to enable transpilation or map lodash-es to lodash (I prefer the later). So I guess people are used to do it.

Regarding ky.

I would just add a note in the doc or keep this issue as closed, so people would not spend time looking through SO or jest issues.

The trick I posted

moduleNameMapper: {
        '^ky$': require.resolve('ky').replace('index.js', 'umd.js'),
}

might be and unsexy overkill but does not affect your bundle and works with lerna too (that's where I spent time).

But I would not document use of require, neither suggest to use import ky from 'ky/umd', it's not about ky, rather about lack of esm support in Jest.

[ericnkatz]

Any way we can solve this issue related:
Circular definition of import alias 'default'. ?

[nfour]

I found to get this working with typescript and ky I had to do this:

I want to write this code:

import ky from 'ky';

So I configured jest with:

  moduleNameMapper: {
    '^ky$': '<rootDir>/.jest/ky.js',
  }

As the umd bundle doesnt export a default, at least in Jest, (yet the TS type says it does), I created ./.jest/ky.js

exports.default = require('ky/umd');

Lot of effort but at least its inline with how the webpack bundle operates.

[riccardo-forina]

"moduleNameMapper": {
  "ky": "ky/umd"
}

this seems to work for me