Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix embeds not working as intended #92

Merged
merged 9 commits into from
Apr 22, 2022
Merged

Fix embeds not working as intended #92

merged 9 commits into from
Apr 22, 2022

Conversation

erayalkis
Copy link
Collaborator

Description

This PR adds the meta tags back into the index.html file, and adds the react-snap package. I noticed that the new way of handling meta tags doesn't work for some sites, as they do not run JavaScript to fetch the metadata, meaning that react-helmet doesn't get a chance to update the meta tags.

This PR adds react-snap to fix this issue. Now, every time we run npm build, react-snap will go through all of the available routes and generate a static HTML page for them. Meaning that any site and app will have a static HTML file available for them, accessible even without JavaScript.

Fixes #90

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

I disabled JavaScript on various browsers and visited all available pages on the site. I can confirm that the meta tags show up without any issues. This should now hopefully fix the embeds on social media sites.

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

Notes:

This new fix should add the embed functionality, but if anything doesn't work as intended, I'll push a bugfix ASAP! These meta tags turned out to be a much more complex issue than I initally thought ! 😄 😄

@vercel
Copy link

vercel bot commented Apr 21, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/atapas/react-play/4BP3cnRy8PHuAM7Cu96S4HxCzBrR
✅ Preview: https://react-play-git-fork-erayalkis-main-atapas.vercel.app

@erayalkis
Copy link
Collaborator Author

This should now fix Twitter etc. not being able to access our meta tags!

@erayalkis
Copy link
Collaborator Author

Thats odd, the build ran perfectly on localhost and it gives me a 404 when I try to view the details :(

@atapas
Copy link
Member

atapas commented Apr 21, 2022

Thats odd, the build ran perfectly on localhost and it gives me a 404 when I try to view the details :(

The build log says this:

https://cra.link/deployment

21:12:55.995 |  
21:12:56.057 | $ react-snap
21:12:56.579 | Error: Failed to launch chrome!
21:12:56.580 | [0421/154256.572991:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
21:12:56.580 |  
21:12:56.580 |  
21:12:56.580 | TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
21:12:56.580 |  
21:12:56.580 | at onClose (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:348:14)
21:12:56.580 | at Interface. (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:337:50)
21:12:56.580 | at Interface.emit (events.js:412:35)
21:12:56.581 | at Interface.close (readline.js:530:8)
21:12:56.581 | at Socket.onend (readline.js:254:10)
21:12:56.581 | at Socket.emit (events.js:412:35)
21:12:56.581 | at endReadableNT (internal/streams/readable.js:1334:12)
21:12:56.581 | at processTicksAndRejections (internal/process/task_queues.js:82:21)
21:12:56.600 | error Command failed with exit code 1.
21:12:56.601 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:12:56.611 | Error: Command "yarn run build" exited with 1

@erayalkis
Copy link
Collaborator Author

Oh, thank you! I'll look into the issue ASAP!

@erayalkis
Copy link
Collaborator Author

Seems like an issue with puppeteer, this should hopefully fix it!

@erayalkis
Copy link
Collaborator Author

That's really odd, the new config should allow puppeteer to run without any issues

@atapas
Copy link
Member

atapas commented Apr 21, 2022

That's really odd, the new config should allow puppeteer to run without any issues

Log

[21:23:47] Cloning github.com/atapas/react-play (Branch: main, Commit: 332fa55)
[21:23:49] Cloning completed: 1.714s
[21:23:49] Installing build runtime...
[21:23:53] Build runtime installed: 3.860s
[21:23:54] Looking up build cache...
[21:23:57] Build cache downloaded [41.26 MB]: 3144.446ms
[21:23:57] Detected package.json
[21:23:57] Installing dependencies...
[21:23:58] yarn install v1.22.17
[21:23:58] [1/4] Resolving packages...
[21:23:59] [2/4] Fetching packages...
[21:24:24] [3/4] Linking dependencies...
[21:24:24] warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[21:24:24] warning "react-helmet > react-side-effect@2.1.1" has incorrect peer dependency "react@^16.3.0 || ^17.0.0".
[21:24:24] warning "react-organizational-chart > @emotion/css > @emotion/babel-plugin@11.7.2" has unmet peer dependency "@babel/core@^7.0.0".
[21:24:24] warning "react-organizational-chart > @emotion/css > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.7" has unmet peer dependency "@babel/core@^7.0.0-0".
[21:24:24] warning "react-scripts > tailwindcss@3.0.12" has unmet peer dependency "autoprefixer@^10.0.2".
[21:24:24] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
[21:24:24] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
[21:24:24] warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.0" has unmet peer dependency "typescript@>= 2.7".
[21:24:24] warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[21:24:24] warning " > react-shimmer-effect@1.0.9" has incorrect peer dependency "react@^16.8.1".
[21:24:24] warning " > react-shimmer-effect@1.0.9" has incorrect peer dependency "react-dom@^16.8.1".
[21:24:36] [4/4] Building fresh packages...
[21:24:43] success Saved lockfile.
[21:24:43] Done in 45.67s.
[21:24:44] Running "yarn run build"
[21:24:44] yarn run v1.22.17
[21:24:44] $ react-scripts build
[21:24:46] Creating an optimized production build...
[21:25:11] Compiled with warnings.
[21:25:11]
[21:25:11] src/common/home/Home.jsx
[21:25:11] Line 29:6: React Hook useEffect has a missing dependency: 'setFilterQuery'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[21:25:11]
[21:25:11] Search for the keywords to learn more about each warning.
[21:25:11] To ignore, add // eslint-disable-next-line to the line before.
[21:25:11]
[21:25:11] File sizes after gzip:
[21:25:11]
[21:25:11] 101.58 kB build/static/js/main.79ae8b27.js
[21:25:11] 8.1 kB build/static/css/main.011a351c.css
[21:25:11] 1.78 kB build/static/js/787.7c42db31.chunk.js
[21:25:11]
[21:25:11] The project was built assuming it is hosted at /.
[21:25:11] You can control this with the homepage field in your package.json.
[21:25:11]
[21:25:11] The build folder is ready to be deployed.
[21:25:11] You may serve it with a static server:
[21:25:11]
[21:25:11] yarn global add serve
[21:25:11] serve -s build
[21:25:11]
[21:25:11] Find out more about deployment here:
[21:25:11]
[21:25:11] https://cra.link/deployment
[21:25:11]
[21:25:11] $ react-snap
[21:25:13] ️️️💬 console.log at /: Unrecognized feature: 'clipboard-write'.
[21:25:13] ️️️💬 console.log at /: JSHandle@array
[21:25:13] ️️️💬 console.log at /: JSHandle@array
[21:25:13] ️️️💬 console.log at /: JSHandle@array
[21:25:13] ️️️💬 console.log at /: JSHandle@array
[21:25:15] ✅ crawled 1 out of 6 (/)
[21:25:15] ️️️💬 console.log at /plays: searchTerm
[21:25:15] ️️️💬 console.log at /plays: filterQuery JSHandle@object
[21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@array
[21:25:15] ️️️💬 console.log at /plays: searchTerm
[21:25:15] ️️️💬 console.log at /plays: filterQuery JSHandle@object
[21:25:15] 💬 console.log at /plays/movies: {
[21:25:15] id: 'pl-0004',
[21:25:15] name: 'Movies',
[21:25:15] description: 'A list of movies from API call.',
[21:25:15] component: {},
[21:25:15] path: '/plays/movies',
[21:25:15] level: 'Intermediate',
[21:25:15] tags: 'Fetch Data, Hooks',
[21:25:15] github: 'atapas',
[21:25:15] featured: true,
[21:25:15] blog: 'https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks'
[21:25:15] }
[21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@array
[21:25:15] ️️️💬 console.log at /plays: Cover image not found for the play States
[21:25:15] ️️️💬 console.log at /plays: Setting the default cover image...
[21:25:15] 💬 console.log at /plays/org-tree: {
[21:25:15] id: 'pl-0005',
[21:25:15] name: 'Organization Tree',
[21:25:15] description: 'A simple org tree',
[21:25:15] component: {},
[21:25:15] path: '/plays/org-tree',
[21:25:15] level: 'Intermediate',
[21:25:15] tags: 'Recursion, Tree',
[21:25:15] github: 'green-roots',
[21:25:15] featured: true
[21:25:15] }
[21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@object
[21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@object
[21:25:16] ⚠️ warning: 404 page title does not contain "404" string
[21:25:16] ✅ crawled 2 out of 6 (/404.html)
[21:25:16] ✅ crawled 3 out of 12 (/plays)
[21:25:16] ✅ crawled 4 out of 12 (/plays/org-tree)
[21:25:16] 💬 console.log at /plays/counter: {
[21:25:16] id: 'pl-counter',
[21:25:16] name: 'Counter',
[21:25:16] description: 'A simple counter which increments the value upto a certain limit!',
[21:25:16] component: {},
[21:25:16] path: '/plays/counter',
[21:25:16] level: 'Beginner',
[21:25:16] tags: 'JSX, State, Props',
[21:25:16] github: 'murtuzaalisurti',
[21:25:16] featured: true
[21:25:16] }
[21:25:16] 💬 console.log at /plays/why-react: TypeError: Cannot read property 'id' of null
[21:25:18] 🔥 pageerror at /plays/why-react: TypeError: Cannot read property 'id' of null
[21:25:18] at id (plays/why-react/WhyReact.jsx:10:10)
[21:25:18] at c (../node_modules/react-dom/cjs/react-dom.production.min.js:166:136)
[21:25:18] at Nh (../node_modules/react-dom/cjs/react-dom.production.min.js:289:385)
[21:25:18] at Lk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:378)
[21:25:18] at Kk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:309)
[21:25:18] at Jk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:169)
[21:25:18] at yk (../node_modules/react-dom/cjs/react-dom.production.min.js:270:442)
[21:25:18] at Dk (../node_modules/react-dom/cjs/react-dom.production.min.js:268:420)
[21:25:18] at d (../node_modules/scheduler/cjs/scheduler.production.min.js:13:202)
[21:25:18] 💬 console.log at /plays/clock: {
[21:25:18] id: 'pl-0002',
[21:25:18] name: 'Clock',
[21:25:18] description: 'This application shows the current time and it increases every second',
[21:25:18] component: {},
[21:25:18] path: '/plays/clock',
[21:25:18] level: 'Beginner',
[21:25:18] tags: 'JSX, Schedule',
[21:25:18] github: 'atapas',
[21:25:18] blog: 'https://blog.greenroots.info',
[21:25:18] video: 'https://youtube.com/tapasadhikary'
[21:25:18] }
[21:25:18] ✅ crawled 5 out of 12 (/plays/clock)
[21:25:18] ✅ crawled 10 out of 12 (/plays/counter)
[21:25:18] ✅ crawled 11 out of 12 (/plays/movies)
[21:25:18] ✅ crawled 12 out of 12 (/plays/why-react)
[21:25:18]
[21:25:18] error Command failed with exit code 1.
[21:25:18] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[21:25:18] Error: Command "yarn run build" exited with 1

@atapas
Copy link
Member

atapas commented Apr 21, 2022

That's really odd, the new config should allow puppeteer to run without any issues

Log

[21:23:47] Cloning github.com/atapas/react-play (Branch: main, Commit: 332fa55) [21:23:49] Cloning completed: 1.714s [21:23:49] Installing build runtime... [21:23:53] Build runtime installed: 3.860s [21:23:54] Looking up build cache... [21:23:57] Build cache downloaded [41.26 MB]: 3144.446ms [21:23:57] Detected package.json [21:23:57] Installing dependencies... [21:23:58] yarn install v1.22.17 [21:23:58] [1/4] Resolving packages... [21:23:59] [2/4] Fetching packages... [21:24:24] [3/4] Linking dependencies... [21:24:24] warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4". [21:24:24] warning "react-helmet > react-side-effect@2.1.1" has incorrect peer dependency "react@^16.3.0 || ^17.0.0". [21:24:24] warning "react-organizational-chart > @emotion/css > @emotion/babel-plugin@11.7.2" has unmet peer dependency "@babel/core@^7.0.0". [21:24:24] warning "react-organizational-chart > @emotion/css > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.7" has unmet peer dependency "@babel/core@^7.0.0-0". [21:24:24] warning "react-scripts > tailwindcss@3.0.12" has unmet peer dependency "autoprefixer@^10.0.2". [21:24:24] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5". [21:24:24] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9". [21:24:24] warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.0" has unmet peer dependency "typescript@>= 2.7". [21:24:24] warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta". [21:24:24] warning " > react-shimmer-effect@1.0.9" has incorrect peer dependency "react@^16.8.1". [21:24:24] warning " > react-shimmer-effect@1.0.9" has incorrect peer dependency "react-dom@^16.8.1". [21:24:36] [4/4] Building fresh packages... [21:24:43] success Saved lockfile. [21:24:43] Done in 45.67s. [21:24:44] Running "yarn run build" [21:24:44] yarn run v1.22.17 [21:24:44] $ react-scripts build [21:24:46] Creating an optimized production build... [21:25:11] Compiled with warnings. [21:25:11] [21:25:11] src/common/home/Home.jsx [21:25:11] Line 29:6: React Hook useEffect has a missing dependency: 'setFilterQuery'. Either include it or remove the dependency array react-hooks/exhaustive-deps [21:25:11] [21:25:11] Search for the keywords to learn more about each warning. [21:25:11] To ignore, add // eslint-disable-next-line to the line before. [21:25:11] [21:25:11] File sizes after gzip: [21:25:11] [21:25:11] 101.58 kB build/static/js/main.79ae8b27.js [21:25:11] 8.1 kB build/static/css/main.011a351c.css [21:25:11] 1.78 kB build/static/js/787.7c42db31.chunk.js [21:25:11] [21:25:11] The project was built assuming it is hosted at /. [21:25:11] You can control this with the homepage field in your package.json. [21:25:11] [21:25:11] The build folder is ready to be deployed. [21:25:11] You may serve it with a static server: [21:25:11] [21:25:11] yarn global add serve [21:25:11] serve -s build [21:25:11] [21:25:11] Find out more about deployment here: [21:25:11] [21:25:11] https://cra.link/deployment [21:25:11] [21:25:11] $ react-snap [21:25:13] ️️️💬 console.log at /: Unrecognized feature: 'clipboard-write'. [21:25:13] ️️️💬 console.log at /: JSHandle@array [21:25:13] ️️️💬 console.log at /: JSHandle@array [21:25:13] ️️️💬 console.log at /: JSHandle@array [21:25:13] ️️️💬 console.log at /: JSHandle@array [21:25:15] ✅ crawled 1 out of 6 (/) [21:25:15] ️️️💬 console.log at /plays: searchTerm [21:25:15] ️️️💬 console.log at /plays: filterQuery JSHandle@object [21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@array [21:25:15] ️️️💬 console.log at /plays: searchTerm [21:25:15] ️️️💬 console.log at /plays: filterQuery JSHandle@object [21:25:15] 💬 console.log at /plays/movies: { [21:25:15] id: 'pl-0004', [21:25:15] name: 'Movies', [21:25:15] description: 'A list of movies from API call.', [21:25:15] component: {}, [21:25:15] path: '/plays/movies', [21:25:15] level: 'Intermediate', [21:25:15] tags: 'Fetch Data, Hooks', [21:25:15] github: 'atapas', [21:25:15] featured: true, [21:25:15] blog: 'https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks' [21:25:15] } [21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@array [21:25:15] ️️️💬 console.log at /plays: Cover image not found for the play States [21:25:15] ️️️💬 console.log at /plays: Setting the default cover image... [21:25:15] 💬 console.log at /plays/org-tree: { [21:25:15] id: 'pl-0005', [21:25:15] name: 'Organization Tree', [21:25:15] description: 'A simple org tree', [21:25:15] component: {}, [21:25:15] path: '/plays/org-tree', [21:25:15] level: 'Intermediate', [21:25:15] tags: 'Recursion, Tree', [21:25:15] github: 'green-roots', [21:25:15] featured: true [21:25:15] } [21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@object [21:25:15] ️️️💬 console.log at /plays/movies: data JSHandle@object [21:25:16] ⚠️ warning: 404 page title does not contain "404" string [21:25:16] ✅ crawled 2 out of 6 (/404.html) [21:25:16] ✅ crawled 3 out of 12 (/plays) [21:25:16] ✅ crawled 4 out of 12 (/plays/org-tree) [21:25:16] 💬 console.log at /plays/counter: { [21:25:16] id: 'pl-counter', [21:25:16] name: 'Counter', [21:25:16] description: 'A simple counter which increments the value upto a certain limit!', [21:25:16] component: {}, [21:25:16] path: '/plays/counter', [21:25:16] level: 'Beginner', [21:25:16] tags: 'JSX, State, Props', [21:25:16] github: 'murtuzaalisurti', [21:25:16] featured: true [21:25:16] } [21:25:16] 💬 console.log at /plays/why-react: TypeError: Cannot read property 'id' of null [21:25:18] 🔥 pageerror at /plays/why-react: TypeError: Cannot read property 'id' of null [21:25:18] at id (plays/why-react/WhyReact.jsx:10:10) [21:25:18] at c (../node_modules/react-dom/cjs/react-dom.production.min.js:166:136) [21:25:18] at Nh (../node_modules/react-dom/cjs/react-dom.production.min.js:289:385) [21:25:18] at Lk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:378) [21:25:18] at Kk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:309) [21:25:18] at Jk (../node_modules/react-dom/cjs/react-dom.production.min.js:279:169) [21:25:18] at yk (../node_modules/react-dom/cjs/react-dom.production.min.js:270:442) [21:25:18] at Dk (../node_modules/react-dom/cjs/react-dom.production.min.js:268:420) [21:25:18] at d (../node_modules/scheduler/cjs/scheduler.production.min.js:13:202) [21:25:18] 💬 console.log at /plays/clock: { [21:25:18] id: 'pl-0002', [21:25:18] name: 'Clock', [21:25:18] description: 'This application shows the current time and it increases every second', [21:25:18] component: {}, [21:25:18] path: '/plays/clock', [21:25:18] level: 'Beginner', [21:25:18] tags: 'JSX, Schedule', [21:25:18] github: 'atapas', [21:25:18] blog: 'https://blog.greenroots.info', [21:25:18] video: 'https://youtube.com/tapasadhikary' [21:25:18] } [21:25:18] ✅ crawled 5 out of 12 (/plays/clock) [21:25:18] ✅ crawled 10 out of 12 (/plays/counter) [21:25:18] ✅ crawled 11 out of 12 (/plays/movies) [21:25:18] ✅ crawled 12 out of 12 (/plays/why-react) [21:25:18] [21:25:18] error Command failed with exit code 1. [21:25:18] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. [21:25:18] Error: Command "yarn run build" exited with 1

The why-react play seems throwing error. Just fyi

@erayalkis
Copy link
Collaborator Author

So, everything runs normally and react-snap crawls each page without any issues, but for some reason it crashes at the last second? This is really weird, I'll try to fix it ASAP, sorry this took so long !

@atapas
Copy link
Member

atapas commented Apr 21, 2022

So, everything runs normally and react-snap crawls each page without any issues, but for some reason it crashes at the last second? This is really weird, I'll try to fix it ASAP, sorry this took so long !

No worries, I see it gives id thanks for one if the play. I see it in the log. That may give some lead.

Btw, take it easy. No hurry 😀

@erayalkis
Copy link
Collaborator Author

erayalkis commented Apr 21, 2022

Seems like it was caused by WhyReact using react-router-dom functions for it's id. This should now hopefully fix it!

@erayalkis
Copy link
Collaborator Author

LET'S GOOOOO finally got it !!!!!😄😄

@atapas
Copy link
Member

atapas commented Apr 21, 2022

LET'S GOOOOO finally got it !!!!!😄😄

First thing I will review it tomorrow morning and merge. Good work.

@erayalkis
Copy link
Collaborator Author

LET'S GOOOOO finally got it !!!!!😄😄

First thing I will review it tomorrow morning and merge. Good work.

Alrighty! Thank you so much, I'm glad I can be a part of this amazing project !!!

@atapas atapas merged commit b72fd9e into reactplay:main Apr 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 [Bug report]: Meta tags not being properly detected in some sites
2 participants