react-snap
react-snap copied to clipboard
Error building with react-snap: Protocol error (Network.getResponseBody): Target close
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?
https://stackoverflow.com/questions/62787082/error-building-react-snap-protocol-error-network-getresponsebody-target-clos
No help or suggestions from the team? @stereobooster @badsyntax @pushred
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.
Oh thanks for the suggestion. Will attempt to remove all console.logs
@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?)
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.