search

geelen / react-snapshot

A zero-configuration static pre-renderer for React apps
MIT License
1.66k stars 104 forks source link

Error: matchMedia not present, legacy browsers require a polyfill #98

Open romkacrv opened 6 years ago

romkacrv commented 6 years ago

Starting crawling http://localhost:46865/

Error: Uncaught [Error: matchMedia not present, legacy browsers require a polyfill] at reportException (node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:58:24) at processJavaScript (node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:130:7) at HTMLScriptElementImpl._eval (node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7) at node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:31:22 at Object.check node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:89:11) at node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:108:12 at wrappedEnqueued (node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:255:16) at Request.request [as _callback] (/node_modules/react-snapshot/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:203:9) at Request.self.callback (node_modules/request/request.js:188:22) at emitTwo (events.js:126:13) Error: matchMedia not present, legacy browsers require a polyfill

An error appear while using react-snapshot, any suggestion ? Tried https://github.com/akiran/react-slick/issues/472, did not help.

PDS42 commented 6 years ago

Just had the same issue after following the three steps of the repository. Is there a known fix for this ?

balazsorban44 commented 6 years ago

Same issue here

romkacrv commented 6 years ago

tried https://github.com/akiran/react-slick/issues/472, did not help the same issue https://github.com/geelen/react-snapshot/issues/33

baomastr commented 6 years ago

@romkacrv if you run npm run eject and paste polyfill that mentioned in issue https://github.com/akiran/react-slick/issues/742#issuecomment-298992238 into config/polyfills.js it will solve the problem.

stefankp commented 6 years ago

I am having the same issue. The polyfill mentioned by @baomastr does not solve it.

nimahkh commented 6 years ago

same issue

ZengTianShengZ commented 5 years ago

@stefankp the @baomastr mehtod can solve the problem.

create a file setupTests.js and place it inside the src/ folder src/setupTests.js 

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

and import src/index.js

import './setupTests.js'
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App';
import { render } from 'react-snapshot';
const rootElement = document.getElementById('root');
render(<App/>, rootElement)
zernabhussain commented 4 years ago

check this: https://github.com/akiran/react-slick/issues/742#issuecomment-557793922