Current Behavior
Im trying to run react-snap on my CD server using a docker container with a node 8.16 image.
It's failing every attempt with
build 24-May-2019 17:34:18 🔥 pageerror at /: SyntaxError: Unexpected token <
This is only failing on the docker container. Locally, using the same node version, everything is peachy.
In an attempt to narrow things down, I completely stripped my app, leaving a basically empty (error free) html shell, and a simple app whose entirety is
`
hi
</div>
`
Received the exact same failure state.
Reproducible:
Haven't found a way to repro locally, works like a dream on my machine.
I got this same error trying to render an SPA with no other external files/data to load - just a simple single page HTML. It seems to be an error caused by the "homepage" entry in package.json. I had:
"homepage": ".",
which was enough to tip it over. Removing that line solved the problem, but, of course, it was there for a reason.
So not much help but I rabbit holed on this over the weekend, swapped my node images around in docker and finally got a different error message which was solvable (basically had to add some steps to install chrome-unstable per puppeteer's troubleshooting).
As you'll note there are no ajax requests anywhere inside of that.
The truly perplexing part is, running the docker container generated from that dockerfile locally, and it builds just fine (minimal app or not). It appears to be failing on remote builds which seems counter to my understanding of docker.
Countless hours later, and I found the culprit. Puppeteer does not like relative path strings passed to it as a publicPath.
My app is being deployed to a subdirectory so I'm using an environment variable to serve a stringified publicPath to webpack.
I tried separating the build and snap steps so that the publicPath variable was only present on the build step, but it was a faint hope and did not succeed.
Closing this as it seems to me to be a Puppeteer issue.
Some additional clarity for those running into this.
My problem had less to do with Docker, and more to do with the way my site is laid out (subdirectories/subdirectory for search purposes)
i.e. instead of being at www.app.com I'm at www.anotherdomain.com/app
React-snap paths to my dist folder, and attempts to access my resources at anotherdomain.com/app, even though they're all in dist.
My solve was to run my build step first (independent of react-snap), create an "app" subdirectory in dist with my dist files, run react-snap, then clean up my dist directory.
Problematically this means inlineCss won't work (any assets it inlines 404) but that's a problem for another day.
I got this same error trying to render an SPA with no other external files/data to load - just a simple single page HTML. It seems to be an error caused by the "homepage" entry in package.json. I had:
"homepage": ".",
which was enough to tip it over. Removing that line solved the problem, but, of course, it was there for a reason.
Bug Report
In Use Latest React-snap Node 8.16 Preact 8.1
Current Behavior Im trying to run react-snap on my CD server using a docker container with a node 8.16 image.
It's failing every attempt with
build 24-May-2019 17:34:18 🔥 pageerror at /: SyntaxError: Unexpected token <This is only failing on the docker container. Locally, using the same node version, everything is peachy.
In an attempt to narrow things down, I completely stripped my app, leaving a basically empty (error free) html shell, and a simple app whose entirety is
`
hi
`
Received the exact same failure state.
Reproducible: Haven't found a way to repro locally, works like a dream on my machine.
Well you can post Docker file with source. Error is most likely from
JSON.parse:I guess something is doing fetch request to localhost which returns HTML instead of JSON
I got this same error trying to render an SPA with no other external files/data to load - just a simple single page HTML. It seems to be an error caused by the
"homepage"entry inpackage.json. I had:which was enough to tip it over. Removing that line solved the problem, but, of course, it was there for a reason.
Homepage issue is reported here https://github.com/stereobooster/react-snap/issues/153
Having the same problem with React v16.8.6, node v10.13.0.
So not much help but I rabbit holed on this over the weekend, swapped my node images around in docker and finally got a different error message which was solvable (basically had to add some steps to install chrome-unstable per puppeteer's troubleshooting).
@takticcode try using the base node 10 image, not alpine or slim versions. Then it should hopefully be a matter of setting your docker image to follow Google's steps here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker
I also had to pass puppeteer the following: "--no-sandbox", "--disable-setuid-sandbox" as per @stereobooster 's helpful docs.
Spoke too soon, it's still present with node.
I broke the app down to its simplest components, and even with the minimal code attached in the gist (https://gist.github.com/tmartin2089/0846ee0146df7ec848da9ee794a6a24e) it's still failing with the exact same error.
As you'll note there are no ajax requests anywhere inside of that.
The truly perplexing part is, running the docker container generated from that dockerfile locally, and it builds just fine (minimal app or not). It appears to be failing on remote builds which seems counter to my understanding of docker.
Countless hours later, and I found the culprit. Puppeteer does not like relative path strings passed to it as a publicPath.
My app is being deployed to a subdirectory so I'm using an environment variable to serve a stringified publicPath to webpack.
I tried separating the build and snap steps so that the publicPath variable was only present on the build step, but it was a faint hope and did not succeed.
Closing this as it seems to me to be a Puppeteer issue.
Some additional clarity for those running into this.
My problem had less to do with Docker, and more to do with the way my site is laid out (subdirectories/subdirectory for search purposes)
i.e. instead of being at www.app.com I'm at www.anotherdomain.com/app
React-snap paths to my dist folder, and attempts to access my resources at anotherdomain.com/app, even though they're all in dist.
My solve was to run my build step first (independent of react-snap), create an "app" subdirectory in dist with my dist files, run react-snap, then clean up my dist directory.
Problematically this means inlineCss won't work (any assets it inlines 404) but that's a problem for another day.
solved my problem.