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

Created on 2 Jan 2018 · 8Comments · Source: akiran/react-slick

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

Source

dschinkel

Most helpful comment

@akiran

2017
https://github.com/akiran/react-slick/issues/645 - Feb !
https://github.com/akiran/react-slick/issues/876 and this was from October!
https://github.com/akiran/react-slick/issues/523 - October!
https://github.com/akiran/react-slick/issues/742 - from May!

are you just going to ignore the fact that this is a major issue for all?

dschinkel on 29 Jan 2018

👍4

All 8 comments

@akiran can you please get to merging this fork into a release ASAP, this fixed it for us github.com/mygooder/react-slick

for those using React 16 this is critical.

dschinkel on 3 Jan 2018

@akiran

are you just going to ignore the fact that this is a major issue for all?

dschinkel on 29 Jan 2018

👍4

@dschinkel the issues you referenced have respective solutions and are closed. We don't think this issue exists anymore. Please make sure you're using the latest version of react-slick.

laveesingh on 1 Feb 2018

Same issue arise.
"react": "^15.5.4",
"react-dom": "^15.5.4",

subratadhal on 7 May 2018

Same issue for me aswell.
"react": "^15.4.2",
"react-dom": "^15.4.2",

Is there an easy way to fix this?

andrewsteadcc on 26 Jun 2018

@laveesingh Please provide those solutions, because it is still not working in react 16

    "react": "^16.5.2",
    "react-dom": "^16.5.2",

Test suite failed to run

    matchMedia not present, legacy browsers require a polyfill

      at new MediaQueryDispatch (node_modules/enquire.js/src/MediaQueryDispatch.js:15:15)
      at Object.<anonymous> (node_modules/enquire.js/src/index.js:2:18)
      at Object.<anonymous> (node_modules/react-slick/lib/slider.js:31:53)
      at Object.<anonymous> (node_modules/react-slick/lib/index.js:5:15)
      at Object.<anonymous> (src/Components/Slider.jsx:2:19)
      at Object.<anonymous> (src/Components/Home.jsx:4:15)
      at Object.<anonymous> (src/App.js:12:13)
      at Object.<anonymous> (src/App.test.js:3:12)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

dextel2 on 6 Oct 2018

Have you guys tried the approach listed on #742? It worked for me.

mgillory on 10 Oct 2018

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.