V8

[wheresrhys]

This

• implements ES modules
• hopefully resolves problems with babel-core clashes
• adds typescript types
• removes the UNMATCHED and MATCHED constants, and no longer exports fetchMock as a property, as well as the default, export
• only includes the whatwg-url polyfill in nodejs

Reviews of the new documentation much appreciated

Note - the latest release is 8.0.0-alpha.10

[coveralls]

Coverage increased (+0.006%) to 97.118% when pulling 5c06377 on v8 into f4616e8 on master.

[robertknight]

Thank-you for your efforts @wheresrhys 🙂. It turns out that fdf9d61 solved my immediate problem as described in #419 by making browserify use a compatible version of core-js when bundling fetch-mock. browserify respects the "browser" field so importing "fetch-mock" Just Works although the output is suboptimal.

The result of browserify -r fetch-mock (using v8.0.0-alpha3) is ~900KB of JS which is not ideal as more code makes tests run slower (we use headless Chrome + Karma as the main environment). The biggest offender, based on looking output from disc, seems to be whatwg-url. Removing the whatwg-url and babel-polyfill imports from the version of the code on master drops the unminified bundle size from 910KB to 95KB. I can work around this but it would be great if it wasn't necessary.

[robertknight]

I'm not familiar enough with the handling of CJS + ESM modules in different node versions / bundlers to do much of a technical review of the new documentation here, but I appreciate the fact that it exists. As I mentioned above, in our toolchain require("fetch-mock") / import "fetch-mock" works out of the box.

[wheresrhys]

Thanks for the feedback @robertknight. Are you able to tell which entry point your build is picking up? I guess it's ./es5/client.js.

Interesting to find the impact of whatwg-url on bundle size - most of the difference in size you're seeing is down to it I think, but it's inclusion is not new, and I actually see a slight reduction in size in v8. Are you seeing the bundle size go up in comparison?

[wheresrhys]

Tweaked it so it only requires whatwg-url on the server. The browser property of package.json also points at modern esm code, not es5, which should help a little more. I'll release as 8.0.0-alpha. Would appreciate if you could give it another whirl

[LarsDenBakker]

Thanks, this does solve my issue. And the readme is good too.

[berstend]

There seems to be a bug somewhere (8.0.0-alpha.5, node v13.0.1)

project/node_modules/fetch-mock/package.json

...
"main": "./cjs/server.js",
...

With "main": "./cjs/src/server.js" it works. :)

PPS:
In Typescript import fetchMock from 'fetch-mock' doesn't work (Cannot find module 'fetch-mock'.ts(2307)) whereas const fetchMock = require('fetch-mock') works, with above bugfix.

[wheresrhys]

@berstend that's strange. This bug did exist briefly - up to alpha.2 I think - but should be fixed by 4eddade. Locally I get everything copied into the root of /cjs - no idea why the npm prepublish step would be behaving differently in CI. I will need to brush up on my BASH to figure out why

Does import fetchMock from 'fetch-mock' work in typescript with v7?

[wheresrhys]

That bug with the cjs export is now fixed. No idea why it was broken - both myself and CI run bash, so it's really odd that the same command had different results.

[Dynalon]

Just upgraded to 8.0.0-alpha.11 and it works with core-js@3 👍

One little note: MockOptions is not exported in the typescript typings, but should be (it was exported in the @types/fetch-mock typings. Aside from that, I had to change import * as fetchMock from "fetch-mock" into import fetchMock from "fetchMock" but then everything worked fine using the mocks 👍

[wheresrhys]

@Dynalon thanks for trying it out. I'd really appreciate a PR onto this branch to fix the typescript issue as I'm not really a typescript aficionado, and I pretty much copied the type defs from DefinitelyTyped unchanged, so not sure how I could have dropped an export

[Dynalon]

@Dynalon thanks for trying it out. I'd really appreciate a PR onto this branch to fix the typescript issue as I'm not really a typescript aficionado, and I pretty much copied the type defs from DefinitelyTyped unchanged, so not sure how I could have dropped an export

Forget what I said, it is still exported. I got mixed up with the different kind of module import that v8 brings. Everything fine 👍

[MathieuPuech]

I tried to use the esm/client.mjs without success, there is an error from querystring. It seems this is a native module on node but it does not exists in browsers.

[wheresrhys]

Thanks @MathieuPuech - I will investigate. Can you tell me a bit more about your toolchain? What bundlers, transpilers etc are you using, and in which environment are your tests running

[evan-10e]

👍

[wheresrhys]

nudge @MathieuPuech

[MathieuPuech]

I’m using it with es-dev-server
https://www.npmjs.com/package/es-dev-server
There is no bundling, transpiler only for node_modules path resolution

[LarsDenBakker]

Fyi es dev server uses https://www.npmjs.com/package/resolve for resolving modules

[wheresrhys]

Thanks both - I will try to recreate the issue and hopefully address it

[wheresrhys]

@MathieuPuech that should be fixed now. It's annoying that es-dev-server prefers module to browser, even when browser points at a .mjs file. I may raise an issue

[MathieuPuech]

It's working when using import fetchMock from 'fetch-mock/esm/client.mjs' instead of import fetchMock from 'fetch-mock' because of the resolution.

es-dev-server should maybe not resolve with module package.json property. But I don't know who is right because module property is not documented in npm js package.json documentation.