From 64c8df222d29fade27bfc39cff5a93cd6d47242a Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 28 Aug 2019 14:53:04 +0300 Subject: [PATCH] Migrate from react-helmet to react-helmet-async --- package.json | 2 +- src/app.js | 27 ++++++++++++-------- src/app.node.test.js | 10 +++++--- src/components/Page/Page.js | 2 +- yarn.lock | 50 ++++++++++++++++++------------------- 5 files changed, 51 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 6f9d7084..960f033f 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "react-final-form": "^6.3.0", "react-final-form-arrays": "^3.1.1", "react-google-maps": "^9.4.5", - "react-helmet": "^5.2.0", + "react-helmet-async": "^1.0.2", "react-intl": "^2.9.0", "react-moment-proptypes": "^1.6.0", "react-redux": "^7.1.1", diff --git a/src/app.js b/src/app.js index 8ac49fa2..9d2dcb49 100644 --- a/src/app.js +++ b/src/app.js @@ -6,7 +6,7 @@ import ReactDOMServer from 'react-dom/server'; // https://github.com/airbnb/react-dates#initialize // NOTE: Initializing it here will initialize it also for app.test.js import 'react-dates/initialize'; -import Helmet from 'react-helmet'; +import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter, StaticRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; import difference from 'lodash/difference'; @@ -93,9 +93,11 @@ export const ClientApp = props => { return ( - - - + + + + + ); @@ -106,14 +108,17 @@ const { any, string } = PropTypes; ClientApp.propTypes = { store: any.isRequired }; export const ServerApp = props => { - const { url, context, store } = props; + const { url, context, helmetContext, store } = props; setupLocale(); + HelmetProvider.canUseDOM = false; return ( - - - + + + + + ); @@ -137,9 +142,11 @@ export const renderApp = (url, serverContext, preloadedState) => { // shouldn't do any SDK calls in the (server) rendering lifecycle. const store = configureStore(preloadedState); + const helmetContext = {}; + const body = ReactDOMServer.renderToString( - + ); - const head = Helmet.renderStatic(); + const { helmet: head } = helmetContext; return { head, body }; }; diff --git a/src/app.node.test.js b/src/app.node.test.js index de0cfbbb..f1668e87 100644 --- a/src/app.node.test.js +++ b/src/app.node.test.js @@ -5,17 +5,21 @@ import React from 'react'; import ReactDOM from 'react-dom'; import ReactDOMServer from 'react-dom/server'; -import Helmet from 'react-helmet'; +import { Helmet } from 'react-helmet-async'; import forEach from 'lodash/forEach'; import { ClientApp, ServerApp } from './app'; import configureStore from './store'; const render = (url, context) => { const store = configureStore(); + + const helmetContext = {}; + const body = ReactDOMServer.renderToString( - + ); - const head = Helmet.peek(); + + const { helmet: head } = helmetContext; return { head, body }; }; diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 3df6bab0..90ed4941 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import Helmet from 'react-helmet'; +import { Helmet } from 'react-helmet-async'; import { withRouter } from 'react-router-dom'; import { injectIntl, intlShape } from 'react-intl'; import classNames from 'classnames'; diff --git a/yarn.lock b/yarn.lock index 2b930962..0983bbef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -756,6 +756,13 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-typescript" "^7.3.2" +"@babel/runtime@7.3.4": + version "7.3.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83" + integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g== + dependencies: + regenerator-runtime "^0.12.0" + "@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" @@ -4240,11 +4247,6 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" -exenv@^1.2.1: - version "1.2.2" - resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" - integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= - exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -5574,7 +5576,7 @@ intl-relativeformat@^2.1.0: dependencies: intl-messageformat "^2.0.0" -invariant@^2.1.1, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4: +invariant@2.2.4, invariant@^2.1.1, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -8866,7 +8868,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9139,7 +9141,7 @@ react-error-overlay@^6.0.1: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f" integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw== -react-fast-compare@^2.0.2: +react-fast-compare@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== @@ -9176,15 +9178,16 @@ react-google-maps@^9.4.5: scriptjs "^2.5.8" warning "^3.0.0" -react-helmet@^5.2.0: - version "5.2.1" - resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa" - integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA== +react-helmet-async@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.2.tgz#bb55dd8268f7b15aac69c6b22e2f950abda8cc44" + integrity sha512-qzzchrM/ibHuPS/60ief8jaibPunuRdeta4iBDQV+ri2SFKwOV+X2NlEpvevZOauhmHrH/I6dI4E90EPVfJBBg== dependencies: - object-assign "^4.1.1" - prop-types "^15.5.4" - react-fast-compare "^2.0.2" - react-side-effect "^1.1.0" + "@babel/runtime" "7.3.4" + invariant "2.2.4" + prop-types "15.7.2" + react-fast-compare "2.0.4" + shallowequal "1.1.0" react-intl@^2.9.0: version "2.9.0" @@ -9273,14 +9276,6 @@ react-router@5.0.1: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-side-effect@^1.1.0: - version "1.1.5" - resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" - integrity sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw== - dependencies: - exenv "^1.2.1" - shallowequal "^1.0.1" - react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1" @@ -9490,6 +9485,11 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== + regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb" @@ -10043,7 +10043,7 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallowequal@^1.0.1: +shallowequal@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==