React 16: Error: matchMedia not present, legacy browsers require a polyfill

See original GitHub issue

I’ve already seen https://github.com/akiran/react-slick/issues/920 but this doesn’t make sense. Why should our project care about react-slick unit tests? We get this error as well, running React 16 too. Or is something else causing this error?

(note: ttt is just for privacy for this post)

/usr/local/bin/node /Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/mocha/bin/_mocha ./src/test/mocha-webpack-compiler.js --require ./src/test/jsdom --compilers js:babel-core/register --ui bdd --reporter /Applications/WebStorm.app/Contents/plugins/NodeJS/js/mocha-intellij/lib/mochaIntellijReporter.js --recursive /Users/ttt/code/projects/consulting/ttt/ttt/web-app/src/test/unit
/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/node_modules/enquire.js/src/MediaQueryDispatch.js:15
        throw new Error('matchMedia not present, legacy browsers require a polyfill');
        ^

Error: matchMedia not present, legacy browsers require a polyfill
    at new MediaQueryDispatch (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/node_modules/enquire.js/src/MediaQueryDispatch.js:15:15)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/node_modules/enquire.js/src/index.js:2:18)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/dcg-shared-react/node_modules/react-slick/lib/slider.js:37:38)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/node_modules/react-slick/lib/index.js:3:18)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/lib/components/Carousel/Carousel.js:37:19)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/@ttt/shared-react/lib/index.js:286:17)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/src/app/helpers/ContentHelper.js:8:1)
    at Module._compile (module.js:569:30)
    at loader (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/daveschinkel/code/projects/consulting/ttt/ttt/web-app/src/app/components/Header/HeaderSearch/SearchTabs.js:4:1)
    at Module._compile (module.js:569:30)
    at loader (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/src/test/unit/components/HeaderSearch/tab.item.spec.js:3:1)
    at Module._compile (module.js:569:30)
    at loader (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ttt/code/projects/consulting/ttt/ttt/eb-app/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at /Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/mocha/lib/mocha.js:220:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/daveschinkel/code/projects/consulting/ttt/ttt/web-app/node_modules/mocha/lib/mocha.js:217:14)
    at Mocha.run (/Users/daveschinkel/code/projects/consulting/ttt/ttt/web-app/node_modules/mocha/lib/mocha.js:469:10)
    at Object.<anonymous> (/Users/ttt/code/projects/consulting/ttt/ttt/web-app/node_modules/mocha/bin/_mocha:404:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
dschinkelcommented, Jan 29, 2018
0reactions
kvieira90commented, Jul 27, 2020

This is definitely still an issue. Getting this with

"react-dom": "16.9.0",
"react": "16.9.0",
"react-slick": "^0.27.0",

When I resolve the issue using proposed solutions in this repo and elsewhere

window.matchMedia = window.matchMedia || function() {
  return {
    matches: false,
    addListener: function() {},
    removeListener: function() {}
  };
};

I start getting a “Cannot read property ‘location’ of undefined” when using useLocation and “Cannot read property ‘history’ of undefined” when using useHistory hooks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest testing with react: matchMedia not present, legacy ...
Any suggestions to fix? matchMedia not present, legacy browsers require a polyfill at new MediaQueryDispatch (node_modules/enquire.js/src/ ...
Read more >
matchMedia not present when testing create-react-app ...
Take a clue from the error message: matchMedia not present, legacy browsers require a polyfill. This says that some feature is not available...
Read more >
react-slick-test - npm Package Health Analysis - Snyk
If you try to run tests with jest in a project that uses react-slick, you may run into this error matchMedia not present,...
Read more >
matchMedia not present when testing create-react-app ...
This says that some feature is not available while testing and it needs to be implemented somehow to perform the action. Find a...
Read more >
Using react-slick for Populating RSS Feeds in SUSI Chat
Error log, which one may encounter while using react-slick – matchMedia not present, legacy browsers require a polyfill at Object.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found