react-snap Fails when Create React App has a custom "homepage" field in package.json

In Create React App there is an option to specify a "homepage" field, which defaults to "/". It specifies where the app is served from.

When this is done, react-snap fails with the error

🔥 /mysite/ pageerror: Error: SyntaxError: Unexpected token < at Page._handleException (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/puppeteer/lib/Page.js:409:38) at CDPSession.Page.client.on.exception (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/puppeteer/lib/Page.js:102:60) at CDPSession.emit (events.js:159:13) at CDPSession._onMessage (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/puppeteer/lib/Connection.js:217:12) at Connection._onMessage (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/puppeteer/lib/Connection.js:117:19) at WebSocket.emit (events.js:159:13) at Receiver._receiver.onmessage (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/ws/lib/WebSocket.js:141:47) at Receiver.dataMessage (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/ws/lib/Receiver.js:389:14) at Receiver.getData (/Users/shaneosullivan/workarea/maskmail.net/web/public-site/node_modules/ws/lib/Receiver.js:330:12) 🕸 (1/1) /mysite/

Looking at the default options for react-snap I saw publicPath so I tried setting that to the same value, and got the same error.

To reproduce:

1: On the command line, create-react-app demo 2: cd demo 3: yarn add --dev react-snap 4: yarn install 5: Open package.json and add the following at the root of the config object "homepage": "mysite", 6: Also in package.json, add the following to the scripts objects "postbuild": "react-snap", 5: yarn build or npm run build

You can also try using the publicPath option for react-snap by adding the following to package.json "reactSnap": { "publicPath": "/mysite", }

and you should observe the same error

Mar 27 '18 18:03 shaneosullivan

It will be ok if you specify valid URL e.g. https://mydomain.com/ or https://mydomain.com/test

Mar 29 '18 08:03 stereobooster

The issue with this is that I have three different urls, for development, staging and production, so hard coding an absolute path in the package.json is not feasible, hence me using relative urls.

Is if possible to detect this in react-snap and set up a proxy route in the Node server?

Mar 29 '18 16:03 shaneosullivan

well actually URLs like /path should work too. Are you sure issue with homepage?

Mar 29 '18 16:03 stereobooster

Argh, I feel dumb. Putting the forward slash in front of it works. Thanks for the help - is there something that could be done to make both work so others don't run into the same issue?

Mar 29 '18 16:03 shaneosullivan

Related: https://github.com/stereobooster/react-snap/issues/98

Mar 30 '18 10:03 stereobooster

I'm using react-snap without any homepage field in package.json, and it still breaks with the same error:

/ pageerror: Error: SyntaxError: Unexpected token < in JSON at position 0

The project is built with CRA.

Jun 08 '18 13:06 rumbogs

@rumbogs this is not the same error. Your error most likely comes from your JS code. Do you do AJAX requests and JSON.parse?

Jun 08 '18 14:06 stereobooster

yes, but they used to work, I'm not sure what changed, is there a best practice for handling these requests when generating the static files?

Jun 11 '18 07:06 rumbogs

Check your backend, add logging to JSON.parse to see what the issue, add logging to fetch request.

Jun 11 '18 08:06 stereobooster

Ok, so it's not a react-snap specific bug, if the backend works, then so should react-snap right?

Jun 11 '18 12:06 rumbogs

yes. If you find this is not the case open separate ticket with details on how to reproduce it

Jun 11 '18 14:06 stereobooster

I'm having a similar issue, however, I get a different error message. If I leave the 'homepage' field blank in my package.json react-snap works great during the build process. If I specify a full path https://mydomain.com/Folder/subfolder then I get a message like this:

🕸  (1/14) /Folder/subfolder/
🕸  (2/25) /
🔥  /Folder/subfolder/static/media/regional-impacts-bc.91d0c03a.pdfError: net::ERR_ABORTED at http://localhost:45678/Folder/subfolder/static/media/report.91d0c03a.pdf
    at navigate (/Users/stevenrichards/Code/project/node_modules/puppeteer/lib/Page.js:539:37)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

React snap continues to run after this error message, but it skips the majority of the remaining routes.

Jun 15 '18 03:06 quicklikerabbit

In my case I require using "homepage": "./". Any work around?

Jul 15 '18 18:07 derek126

Any solution for this issue yet?

I'm usung CRA with react-span and specifying homepage path in package.json "homepage": "http://domain.com/SubFolder"

gives this kind of "blank" output

$ react-snap
🕸  (1/1) /SubFolder/
✨  Done in 32.95s.

Work perfectly without homepage specified

Aug 03 '18 22:08 dpmango

This may be related, but in my setup, when I specify "homepage":"/artifacts", I get an error. Without "homepage", it works fine.

$ react-snap
💬  console.log at /artifacts/: Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
🔥  pageerror at /artifacts/: Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at Error (../node_modules/react-dom/cjs/react-dom.production.min.js:25:0)
    at ca (../node_modules/react-dom/cjs/react-dom.production.min.js:40:0)
    at t (../node_modules/react-dom/cjs/react-dom.production.min.js:3248:0)
    at dg (../node_modules/react-dom/cjs/react-dom.production.min.js:3339:0)
    at P (../node_modules/react-dom/cjs/react-dom.production.min.js:3542:7)
    at yg (../node_modules/react-dom/cjs/react-dom.production.min.js:4646:0)
    at fh (../node_modules/react-dom/cjs/react-dom.production.min.js:4667:0)
    at gh (../node_modules/react-dom/cjs/react-dom.production.min.js:5055:3)
    at Jh (../node_modules/react-dom/cjs/react-dom.production.min.js:5022:0)
✅  crawled 1 out of 1 (/artifacts/)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Nov 20 '18 04:11 dlinder

Need to use "homepage": "./", to take advantage of relative links when opened directly with file:///. I there anyone who can help?

Dec 22 '18 23:12 dachinat

I have to specify env such as PUBLIC_URL='/fe/ui-check/' npm run build targeting separate deployment target, which is quite tedious :( I prefer the param homepage:'./' Hope will support the relative path generate:)

Jan 09 '19 05:01 mzvast

I'm having a similar issue, however, I get a different error message. If I leave the 'homepage' field blank in my package.json react-snap works great during the build process. If I specify a full path https://mydomain.com/Folder/subfolder then I get a message like this:
🕸  (1/14) /Folder/subfolder/
🕸  (2/25) /
🔥  /Folder/subfolder/static/media/regional-impacts-bc.91d0c03a.pdfError: net::ERR_ABORTED at http://localhost:45678/Folder/subfolder/static/media/report.91d0c03a.pdf
    at navigate (/Users/stevenrichards/Code/project/node_modules/puppeteer/lib/Page.js:539:37)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
React snap continues to run after this error message, but it skips the majority of the remaining routes.

@quicklikerabbit: this is a Puppeteer issue: https://github.com/GoogleChrome/puppeteer/issues/2794

Feb 28 '19 19:02 cappslock

Argh, I feel dumb. Putting the forward slash in front of it works. Thanks for the help - is there something that could be done to make both work so others don't run into the same issue?

@shaneosullivan , can you provide more info as to how you fixed this? I feel like I've tried every combination of homepage, PUBLIC_URL, and react-snap publicPath possible, and it continues to throw the error that you reported anytime I introduce a relative path.

Alternatively, does anyone have a working example config that works for a repository's GitHub Pages URL (i.e.; {github_username}.github.io/{repo_name})?

Mar 05 '19 08:03 jamesplease

@jamesplease relative paths doesn't work at all. This logic is not implemented.

But github URLs works just fine. Example https://github.com/MicheleBertoli/css-in-js/blob/master/webpage/package.json

"homepage": "https://michelebertoli.github.io/css-in-js/"

Mar 05 '19 12:03 stereobooster

Update: Oops, this was me being silly. I forgot to properly configure the basename in the Router itself. Totally my fault. Once I did that, everything worked perfectly.

Btw, for future readers, I debugged this by digging into the react-snap code and stepping through it bit by bit until I realized that everything it was doing seemed to be correct.

Thanks a ton for the help @stereobooster .

Original reply here:

Thanks for the quick reply, @stereobooster ! I tried that, and it doesn't seem to be working. One thing I noticed is that the example you provided doesn't seem to be using a router such as React Router. In my site, I am using a router.

This is what I've tried:

The exact same config as the example you provided. I used the same react-static config, the same reactSnap config, the same format of homepage, and the same version of react-static that they created that site with (1.11.4).
I tried that same setup without the reactSnap config
I tried the same setup on the latest react-static
The same setup using PUBLIC_URL instead of homepage

I've also tried...well, yeah, basically every possible variation of the configs that I can think of, and it doesn't ever seem to work when I modify the public URL/homepage. Do you happen to know of an example that uses React Router and a GitHub Pages URL?

Mar 05 '19 16:03 jamesplease

@jamesplease yep, I've been there, done that. https://github.com/stereobooster/react-modal-experiment/blob/master/src/App.js (in this case it is Reach router). I guess, I need to add this to documentation, because it is easy to mess up this.

Mar 05 '19 17:03 stereobooster

I guess, I need to add this to documentation, because it is easy to mess up this.

Would you like for me to create a PR?

(By the way, thank you so much for creating this library. It is probably one of the most useful/interesting projects I've found in quite some time.)

Mar 05 '19 17:03 jamesplease

PRs for documentation are always appreciated. Thanks

Mar 05 '19 18:03 stereobooster

@stereobooster Ran into the same issue with homepage, and a valid GitHub URL such as https://github.com/someuser/somerepo/ still causes the error (with or without a trailing /).

To everyone else, my workaround is to run PUBLIC_URL=/ react-snap. / seems to be the default anyway, so alternatively, you might as well just remove homepage from package.json if you don't need it.

Mar 31 '19 21:03 alex996

Hi! So I have the following situation:

I have a React app created with create-react-app, that I wish to prerender with react-snap. However, it will be served from a subdirectory, which I do not know in advance. What I tried, is to set homepage: "." in package.json, and also use . as basepath in my Router like so:

//...
function App() {
  return (
    <div className="App">
        <Link to="/">Main</Link>
        <Link to="/something">Something</Link>
        <Link to="/not-found">Not found</Link>

        <Router basepath=".">
          <Comp1 path="/"/>
          <Comp2 path="something"/>
          <Comp3 default/>
        </Router>
    </div>
  );
}
const Comp1 = () => <div>Main page</div>
const Comp2 = () => <div>Something page</div>
const Comp3 = () => <div>404</div>
//...

create-react-app build runs, but then react-snap throws me this error:

I tried to read this: https://github.com/badsyntax/react-snap-example/blob/master/README.md#building-for-relative-paths, but I am afraid I did not get it totally. :cry: