fetch-mock: ES5 bundle conflict with core-js v3

The core-js project released a new version, v3.0.0, which changes the module layout. The generated fetch-mock es5 bundle in es5/lib.js requires core-js modules assuming core-js v2’s layout. As a result, attempting to include fetch-mock in a browserify-generated bundle (eg. for use with a browser-based test runner such as Karma) fails.

Steps to reproduce

Save the following package.json into an empty directory:

{
  "name": "fetch-mock-corejs-v3-test",
  "version": "1.0.0",
  "devDependencies": {
    "browserify": "^16.2.3",
    "core-js": "^3.0.0",
    "fetch-mock": "^7.3.1"
  }
}

Run npm install
Run ./node_modules/.bin/browserify -r fetch-mock

Output

Error: Cannot find module 'core-js/modules/es6.typed.array-buffer' from '/private/tmp/fetch-mock-corejs-v3-test/node_modules/fetch-mock/es5'
    at /private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /private/tmp/fetch-mock-corejs-v3-test/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqCallback.oncomplete (fs.js:158:21)

Notes

My suggested solution here would be to omit polyfills from fetch-mock itself and instead make it the responsibility of the package consumer to include polyfills, at least for ES standard library functionality. This avoids potential conflicts with other polyfills and in some cases will reduce bundle size.

Thoughts? I would be happy to submit a PR if the proposed change is agreeable.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 23 (7 by maintainers)

Commits related to this issue

Import fetch-mock package from source to avoid core-js version mismatch errors Currently fetch-mock ships a transpiled copy of its code for use in the browser. This requires several Babel runtime and... — committed to Financial-Times/x-dash by i-like-robots 5 years ago
Import fetch-mock package from source to avoid core-js version mismatch errors Currently fetch-mock ships a transpiled copy of its code for use in the browser. This requires several Babel runtime and... — committed to Financial-Times/x-dash by i-like-robots 5 years ago
chore(storybook): remove core-js plugin from storybook config ref: https://github.com/wheresrhys/fetch-mock/issues/419 — committed to emyarod/carbon by emyarod 5 years ago
Import fetch-mock package from source to avoid core-js version mismatch errors Currently fetch-mock ships a transpiled copy of its code for use in the browser. This requires several Babel runtime and... — committed to Financial-Times/x-dash by i-like-robots 5 years ago
Import fetch-mock package from source to avoid core-js version mismatch errors Currently fetch-mock ships a transpiled copy of its code for use in the browser. This requires several Babel runtime and... — committed to Financial-Times/x-dash by i-like-robots 5 years ago

Most upvoted comments

So Storybook uses corejs-upgrade-webpack-plugin which seems fairly broken - https://github.com/storybookjs/storybook/issues/7445

In the meantime, I’ve hacked around it to remove that plugin in my storybook config. That looks something like this, in .storybook/webpack.config.js:

module.exports = function(options) {
  var config = options.config
  config.plugins = config.plugins.filter(
    p => String(p.resourceRegExp) !== "/core-js/"
  );
  return config

jdelStrother on Jul 17, 2019

I would vote for a v8.0.0 which depends on core-js v3.x and so requires modules from the v3.x layout.

thommyhh on Apr 13, 2019

Yeah, I’m still seeing the same problem as @andreiho & @cushind with 7.3.6. However… I only seem to get it when importing fetch-mock into a storybook build, rather than my regular webpack build. I’m still working on figuring out what the difference between the two setups is.

jdelStrother on Jul 16, 2019

I’m still experiencing this issue as well. Same deal as @andreiho but not using TypeScript.

gitclonedcush on Jul 12, 2019

Somehow I’m stil experiencing this issue. I have core-js@3 installed in the root node_modules and core-js@2 installed locally in fetch-mock. I’m using TypeScript, not sure whether it makes a difference or not.

andreiho on Jul 12, 2019

Damn - broken build. Sorry for the delay - missed the earlier message

Fixed in 7.3.6

wheresrhys on Jul 9, 2019

Another workaround that might help some people. I noticed, that the structure is different when I load the package from git instead of npm/yarn. Instead of require('fetch-mock') I need to use require('fetch-mock/src/client'). The big difference is, that there are no dependencies on any core-js modules when I include the package via git. So how do they get in there in the packaged version, when they obviously aren’t needed?

thommyhh on Apr 13, 2019

Please release a build without the polyfills!

jquense on Jun 27, 2019

v8.0.0-alpha.2 attempts to address this issue. Please leave a 👍 on the pull request https://github.com/wheresrhys/fetch-mock/pull/457 if your problem is solved, or alternatively leave a comment @i-like-robots @emyarod @benjaminVanRyseghem @dancrumb @steveoh @joerodrig @andreiho @cushind @jdelStrother @mkay581 @sahariko @bjankord @CamBurris @kajyr @Dynalon @travist @thommyhh @gfortaine @robertknight @poorpaddy @iamnewton

wheresrhys on Oct 26, 2019

@jdelStrother Same actually, only with Storybook.

andreiho on Jul 16, 2019

@wheresrhys Can we get a publish of the latest release to npm? It seems npm is behind by two versions at this point. It would be nice to have this fix published.

CamBurris on Jul 9, 2019

I’d side with @robertknight that you shouldn’t directly import from core-js but rather leave it to the consumer to establish ES5 compat. Babel comes with babel-polyfill which is essentially just core-js under the hood, and angular also uses core-js. FBs create-react-app also comes with babel-polyfill out of the box.

Additionally, you shouldn’t probably hard-code polyfills for any ES5 stuff anymore for version 8.0, as there are hardly any modern browsers requiring polyfills at all. Given that fetch-mock is a prototyping/testing tool, support for IE11 etc. is hardly a requirement. And if you absolutely need support for older browsers, you’ll probably have babel+core-js present anyways in your build stack or you can fall back to using fetch-mock 7.x

Dynalon on Jun 26, 2019