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
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 1
- Comments: 33 (9 by maintainers)
Got the same problem 😦
And spend more then hour to find this topic…
Why this is not fixed for more then year?
upvoting this
Create a
.envfile in the project project root directoryMore references https://facebook.github.io/create-react-app/docs/advanced-configuration
In my case I require using “homepage”: “./”. Any work around?
I’m using react-snap without any homepage field in package.json, and it still breaks with the same error:
The project is built with CRA.
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?
One thing to note when using create-react-app is, that “homepage” field in package.json works differently than PUBLIC_URL env variable (https://create-react-app.dev/docs/advanced-configuration/):
This confused me as I was trying to set the complete URL via PUBLIC_URL (like in the homepage field) but I needed to set the path without the host.
Now I can specify the paths via my CI system. I needed this to host a staging version on gitlab pages (which uses subfolder by default) whereas the final website will run on the root host.
@stereobooster Ran into the same issue with
homepage, and a valid GitHub URL such ashttps://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 removehomepagefrompackage.jsonif you don’t need it.