CODEWITHSUNDEEP
reactjsnpm
javascript_dabbler
javascript_dabbler

Reputation: 91

react snap giving error with react routes

React snap and react routes don't seem to work properly together and giving errors . Here is the error 

 -- ASYNC --
    at Frame.<anonymous> (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.goto (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/Page.js:629:49)
    at Page.<anonymous> (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/helper.js:112:23)
    at fetchPage (/Users/apple/Desktop/xyz-web-app/node_modules/react-snap/src/puppeteer_utils.js:232:22)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) name: 'TimeoutError' }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2019-06-24T09_10_08_310Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dev: `REACT_APP_API_ENV=dev REACT_APP_DEV_ANALYTICS=true npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2019-06-24T09_10_08_348Z-debug.log

I used react snap with a simple web app which had no routes in it and there was no error postbuild and I could see the 200.html file generated but with the app that we have in production and has numerous routes in app.js seems to throw these errors .I could not figure out as why there are timeout errors in this case and how we can overcome this .

Our routes are somewhat similar to this "react-snap and react-router together make a problem"

Upvotes: 3

Views: 3066

Answers (1)

Tiffany
Tiffany

Reputation: 519

It's too late I think but in case if somebody see this, I detected that route without "path" is causing that problem.

Here is error fragment

✅  crawled 38 out of 41 (/product/guitar)
✅  crawled 39 out of 41 (/product/keyboard)
�  error at /404.html TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
    at C:\wamp64\www\musichouse\node_modules\puppeteer\lib\LifecycleWatcher.js:142:21
  -- ASYNC --
    at Frame.<anonymous> (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\helper.js:111:15)
    at Page.goto (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\Page.js:674:49)
    at Page.<anonymous> (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\helper.js:112:23)
    at fetchPage (C:\wamp64\www\musichouse\node_modules\react-snap\src\puppeteer_utils.js:232:22)
    at processTicksAndRejections (internal/process/task_queues.js:94:5) {
  name: 'TimeoutError'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

so if we look at the code fragment

  export default function App() {
      return (
        <div className="App">
          <Route path="/article/:id">
            <Article />
          </Route>
          <Route path="/cart/">
            <CartPage />
          </Route>
          <Route path="/order/:status">
            <OrderStatus />
          </Route>
          <Route> <----------------<<<< without PATH="someRoute"
            ////////////////////////////////////
            // this was causing that error!!! //
            ////////////////////////////////////
            <Error404 />
          </Route>
        </div>
      );
    }

If I comment that part everything is working perfect! Hope it helps ;)

Upvotes: 2

Related Questions