geelen / react-snapshot

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

Snapshot not snapping anything #101

Open lightninglu10 opened 6 years ago

lightninglu10 commented 6 years ago

Hey guys, I've included react-snapshot in my project, and have these routes defined:

"reactSnapshot": {
    "include": [
        "/article/Bitcoin",
        "/faq",
        "/vision",
        "/about"
    ],
    "snapshotDelay": 300
  }

But when I look at the html files in build/, they're all empty just like the original index.html

for example:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><script src="https://connect.facebook.net/en_US/fbevents.js"></script><script src="https://connect.facebook.net/en_US/fbevents.js"></script><script src="https://use.fontawesome.com/e5c29ad6fb.js"></script><script src="https://cdn.optimizely.com/js/10164640657.js"></script><script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script><meta name="google-site-verification" content="YuGiOgjQfBu6LB_Lu-RkYKqu-IYlBsvrD2YXoKlm1vs"><link rel="canonical" href="https://lunyr.com"><meta name="description" content="Lunyr is the world's first decentralized knowledge base built on the blockchain. Lunyr ensures that your information is verifiable and reliable."><script>!function(e,t,n,c,o,a,f){e.fbq||(o=e.fbq=function(){o.callMethod?o.callMethod.apply(o,arguments):o.queue.push(arguments)},e._fbq||(e._fbq=o),o.push=o,o.loaded=!0,o.version="2.0",o.queue=[],(a=t.createElement(n)).async=!0,a.src="https://connect.facebook.net/en_US/fbevents.js",(f=t.getElementsByTagName(n)[0]).parentNode.insertBefore(a,f))}(window,document,"script"),fbq("init","1930628343919376"),fbq("track","PageView")</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1930628343919376&ev=PageView&noscript=1"/></noscript><link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato%7COpen+Sans%7CRoboto:300,400,500" rel="stylesheet"><script src="https://unpkg.com/multihashes/dist/index.min.js"></script><script src="https://cdn.ravenjs.com/3.20.1/raven.min.js" crossorigin="anonymous"></script><script type="text/javascript">adroll_adv_id="UA2O3F7C3RCEZJXTMFIEA6",adroll_pix_id="FHU3CY5KXFACFITYSWE7PC",function(){var t=function(){if(!document.readyState||/loaded|complete/.test(document.readyState)){if(!window.__adroll_loaded)return __adroll_loaded=!0,void setTimeout(t,50);var e=document.createElement("script"),d="https:"==document.location.protocol?"https://s.adroll.com":"http://a.adroll.com";e.setAttribute("async","true"),e.type="text/javascript",e.src=d+"/j/roundtrip.js",((document.getElementsByTagName("head")||[null])[0]||document.getElementsByTagName("script")[0].parentNode).appendChild(e)}else setTimeout(t,10)};window.addEventListener?window.addEventListener("load",t,!1):window.attachEvent("onload",t)}()</script><style>body{margin:0;padding:0;font-family:sans-serif}</style><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="manifest" href="/home/manifest.json"><link rel="shortcut icon" href="/home/favicon.ico"><title>Lunyr -- The future of Knowledge Sharing</title><link href="/static/css/main.b77d9b91.css" rel="stylesheet"><style></style><script async="true" type="text/javascript" src="http://a.adroll.com/j/roundtrip.js"></script><style></style><script async="true" type="text/javascript" src="http://a.adroll.com/j/roundtrip.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.c23cbd88.js"></script></body></html>

so it looks like it's not actually grabbing the content.

FelixKuehl commented 6 years ago

Did you user use the react-snapshot render function instead of the react render function? If not, do the following in your index.js:

import {render} from 'react-snapshot' // instead of import {render} from 'react-dom'

render(
  <App />,
  document.getElementById('root')
)
ShayMalchi commented 5 years ago

I have the exact same issue, any solution?