Error building with react-snap: Protocol error (Network.getResponseBody): Target close

[VexyCats]

Bug Report

Current Behavior Running my scripts to build the CRA gives this error in the terminal.

Node version: 10.15.3 React-snap version: 1.23.0

UnhandledPromiseRejectionWarning { Error: Protocol error (Network.getResponseBody): Target close
  at Promise (C:\Users.../...node_modules\puppeteer\lib\Connection.js:183:56)
  at new Promise (<anonymous>)
  at CDPSession.send (C:\Users.../...node_modules\puppeteer\lib\Connection.js:182:12)
  at _contentPromise._bodyLoadedPromise.then (C:\Users.../...node_modules\puppeteer\lib\NetworkManager.js:612:45)
  at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
  at Response.<anonymous> (C:\Users.../...node_modules\puppeteer\lib\helper.js:111:15)
  at Page.page.on.response (C:\Users.../...node_modules\minimalcss\src\run.js:264:20)
  at Page.emit (events.js:189:13)
  at NetworkManager.Page.networkManager.on.event (C:\Users.../...node_modules\puppeteer\lib\Page.js:111:69)
  at NetworkManager.emit (events.js:189:13)
  at NetworkManager._onResponseReceived (C:\Users.../...node_modules\puppeteer\lib\NetworkManager.js:272:10)
  at CDPSession.emit (events.js:189:13)
  at CDPSession._onMessage (C:\Users.../...node_modules\puppeteer\lib\Connection.js:200:12)
  at Connection._onMessage (C:\Users.../...node_modules\puppeteer\lib\Connection.js:112:17)
  at WebSocketTransport._ws.addEventListener.event (C:\Users.../...node_modules\puppeteer\lib\WebSocketTransport.js:44:24)
message: 'Protocol error (Network.getResponseBody): Target closed.' }
�💬  UnhandledPromiseRejectionWarning { Error: Protocol error (Network.getResponseBody): Target close
  at Promise (C:\Users.../...node_modules\puppeteer\lib\Connection.js:183:56)
  at new Promise (<anonymous>)
  at CDPSession.send (C:\Users.../...node_modules\puppeteer\lib\Connection.js:182:12)
  at _contentPromise._bodyLoadedPromise.then (C:\Users.../...node_modules\puppeteer\lib\NetworkManager.js:612:45)
  at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
  at Response.<anonymous> (C:\Users.../...node_modules\puppeteer\lib\helper.js:111:15)
  at Page.page.on.response (C:\Users.../...node_modules\minimalcss\src\run.js:264:20)
  at Page.emit (events.js:189:13)
  at NetworkManager.Page.networkManager.on.event (C:\Users.../...node_modules\puppeteer\lib\Page.js:111:69)
  at NetworkManager.emit (events.js:189:13)
  at NetworkManager._onResponseReceived (C:\Users.../...node_modules\puppeteer\lib\NetworkManager.js:272:10)
  at CDPSession.emit (events.js:189:13)
  at CDPSession._onMessage (C:\Users.../...node_modules\puppeteer\lib\Connection.js:200:12)
  at Connection._onMessage (C:\Users.../...node_modules\puppeteer\lib\Connection.js:112:17)
  at WebSocketTransport._ws.addEventListener.event (C:\Users.../...node_modules\puppeteer\lib\WebSocketTransport.js:44:24)
message: 'Protocol error (Network.getResponseBody): Target closed.' }

scripts:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build && npm run build-sw",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-sw": "node ./src/sw-build.js",
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "inlineCss": true
  },

Also for some reason it seems to show the wrong pages in the terminal - for example:

  console.log at /createstore: console.groupEnd
️�💬  console.log at /404.html: %c action %c@@redux-form/UPDATE_SYNC_ERRORS %c@ 14:04:07.751 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;
️�💬  console.log at /404.html: %c prev state color: #9E9E9E; font-weight: bold JSHandle@object

(this happens for all routes it prerenders)

Its current pre-rendering /createstore route, but then it shows as /404. Not sure if this is related.

Doing some research some people have suggested its due to using Lambda functions to return data from the app.

I am using lambda functions, but the answers provided from puppeteer doesn't seem to apply. I'm simply querying an API that runs a lambda to return JSON data from a database. Query is happening from the frontend.

Are there some changes I need to make so snap can prerender my pages even though they are calling an API?

[VexyCats]

https://stackoverflow.com/questions/62787082/error-building-react-snap-protocol-error-network-getresponsebody-target-clos

[VexyCats]

No help or suggestions from the team? @stereobooster @badsyntax @pushred

[viroll]

I just ran into this. Turned out it a was console.log causing the problem. I found it by setting concurrency: 1 in package.json and looking at the place it was trying to render right before it failed.

[VexyCats]

Oh thanks for the suggestion. Will attempt to remove all console.logs

[insaindesign]

@VexyCats, ran into the same problem, currently debugging. Did you solve it?

Sorry for the aside, but what is in your "/src/sw-build.js" script? Looks like we have a similar setup, and i'm having issues with static files generated by react-snap not being in the precache (I assume that's what you're doing there?)

[rogeriopvl]

I was having the same problem. adding concurrency: 1 to react-snap config on package.json fixed it.

Update: managed to increase concurrency to 4, and it still works. This issue appears to be related with Apple M1 processors maybe? I only started having it after switching from an Intel based one.