Skip to content

Commit 816788f

Browse files
shhdgitshhdgit
authored
fix: gatsby-plugin-helmet-async issues (#534)
1 parent a2aed9d commit 816788f

File tree

6 files changed

+130
-11
lines changed

6 files changed

+130
-11
lines changed

‎gatsby-config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ module.exports = {
7474
],
7575
},
7676
},
77-
`gatsby-plugin-react-helmet-async`,
77+
{
78+
resolve: `./gatsby/plugin/helmet-async`,
79+
},
7880
{
7981
resolve: `gatsby-source-filesystem`,
8082
options: {

‎gatsby/plugin/helmet-async/gatsby-browser.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { GatsbyBrowser, WrapRootElementBrowserArgs } from "gatsby";
2+
import React from "react";
3+
import { HelmetProvider } from "react-helmet-async";
4+
5+
export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
6+
element,
7+
}: WrapRootElementBrowserArgs): React.ReactElement => (
8+
<HelmetProvider>{element}</HelmetProvider>
9+
);

‎gatsby/plugin/helmet-async/gatsby-ssr.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
GatsbySSR,
3+
PreRenderHTMLArgs,
4+
RenderBodyArgs,
5+
WrapRootElementNodeArgs,
6+
} from "gatsby";
7+
import React from "react";
8+
import { HelmetProvider, HelmetServerState } from "react-helmet-async";
9+
10+
const context: {
11+
[pathname: string]: { helmet?: HelmetServerState } | undefined,
12+
} = {};
13+
14+
export const onRenderBody: GatsbySSR["onRenderBody"] = ({
15+
pathname,
16+
setHeadComponents,
17+
setHtmlAttributes,
18+
setBodyAttributes,
19+
}: RenderBodyArgs): void => {
20+
const { helmet } = context[pathname] ?? {};
21+
22+
if (helmet) {
23+
const baseComponent = helmet.base.toComponent();
24+
const titleComponent = helmet.title.toComponent();
25+
const components = [
26+
helmet.priority.toComponent(),
27+
helmet.meta.toComponent(),
28+
helmet.link.toComponent(),
29+
helmet.style.toComponent(),
30+
helmet.script.toComponent(),
31+
helmet.noscript.toComponent(),
32+
];
33+
34+
setHeadComponents(
35+
titleComponent[0]?.props.children
36+
? [baseComponent, titleComponent, ...components]
37+
: [baseComponent, ...components]
38+
);
39+
40+
setHtmlAttributes(helmet.htmlAttributes.toComponent());
41+
setBodyAttributes(helmet.bodyAttributes.toComponent());
42+
}
43+
};
44+
45+
export const onPreRenderHTML = ({ pathname }: PreRenderHTMLArgs) => {
46+
context[pathname] = undefined;
47+
};
48+
49+
export const wrapRootElement: GatsbySSR["wrapRootElement"] = ({
50+
pathname,
51+
element,
52+
}: WrapRootElementNodeArgs): React.ReactElement => {
53+
context[pathname] = {};
54+
return <HelmetProvider context={context[pathname]}>{element}</HelmetProvider>;
55+
};

‎gatsby/plugin/helmet-async/package.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "gatsby-plugin-react-helmet-async",
3+
"version": "0.0.1",
4+
"description": "Use react-helmet-async with Gatsby",
5+
"keywords": [
6+
"gatsby",
7+
"gatsby-plugin",
8+
"react",
9+
"react-helmet",
10+
"react-helmet-async"
11+
],
12+
"license": "Apache-2.0",
13+
"main": "index.js",
14+
"scripts": {
15+
"prepublish": "yarn build",
16+
"build": "tsc --build",
17+
"clean": "rm gatsby-browser.d.ts gatsby-browser.js gatsby-ssr.d.ts gatsby-ssr.js",
18+
"lint": "eslint src --ext ts,tsx --fix",
19+
"test": "echo \"Error: no tests specified\" && exit 1"
20+
},
21+
"devDependencies": {
22+
"@types/react": "^17",
23+
"@types/react-dom": "^17",
24+
"@typescript-eslint/eslint-plugin": "^5.42.1",
25+
"@typescript-eslint/parser": "^5.42.1",
26+
"eslint": "^8.27.0",
27+
"eslint-config-prettier": "^8.5.0",
28+
"eslint-config-standard-react": "^12.0.0",
29+
"eslint-config-standard-with-typescript": "^23.0.0",
30+
"eslint-import-resolver-typescript": "^3.5.2",
31+
"eslint-plugin-import": "^2.26.0",
32+
"eslint-plugin-node": "^11.1.0",
33+
"eslint-plugin-prettier": "^4.2.1",
34+
"eslint-plugin-promise": "^6.1.1",
35+
"eslint-plugin-react": "^7.31.10",
36+
"gatsby": "^3.8.0",
37+
"prettier": "^2.7.1",
38+
"prettier-eslint": "^15.0.1",
39+
"react": "^17.0.2",
40+
"react-dom": "^17.0.2",
41+
"react-helmet-async": "^1.3.0",
42+
"typescript": "^4.8.4"
43+
},
44+
"peerDependencies": {
45+
"gatsby": ">=2",
46+
"react": "^16.6.0 || ^17 || ^18",
47+
"react-dom": "^16.6.0 || ^17 || ^18",
48+
"react-helmet-async": "1.x"
49+
},
50+
"resolutions": {
51+
"@types/react": "^17",
52+
"@types/react-dom": "^17"
53+
}
54+
}

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"gatsby-plugin-meta-redirect": "^1.1.1",
3939
"gatsby-plugin-postcss": "^5.21.0",
4040
"gatsby-plugin-purgecss": "^6.1.0",
41-
"gatsby-plugin-react-helmet-async": "^1.2.1",
4241
"gatsby-plugin-react-i18next": "^1.2.2",
4342
"gatsby-plugin-react-svg": "^3.3.0",
4443
"gatsby-plugin-remove-serviceworker": "^1.0.0",

‎yarn.lock

+9-9
Original file line numberDiff line numberDiff line change
@@ -7352,11 +7352,6 @@ gatsby-plugin-purgecss@^6.1.0:
73527352
merge-anything "^5.0.2"
73537353
purgecss "^4.1.3"
73547354

7355-
gatsby-plugin-react-helmet-async@^1.2.1:
7356-
version "1.2.3"
7357-
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet-async/-/gatsby-plugin-react-helmet-async-1.2.3.tgz#28d38b1cfc80edb140abbdb43e93258b0604ce57"
7358-
integrity sha512-fA/FGZbJlZuqeZvaGc3intLWfsPclhY2EAtdHqarwde8D8RlanVn2nVUxrvLEhzwq8n4OpTfj/DChAVmr0D+yA==
7359-
73607355
gatsby-plugin-react-i18next@^1.2.2:
73617356
version "1.2.3"
73627357
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-i18next/-/gatsby-plugin-react-i18next-1.2.3.tgz#ae13bc1c6189e0179913fce83ef537a193cfd1f4"
@@ -11770,15 +11765,20 @@ react-error-overlay@^6.0.11:
1177011765
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
1177111766
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
1177211767

11773-
react-fast-compare@^3.1.1, react-fast-compare@^3.2.0:
11768+
react-fast-compare@^3.1.1:
1177411769
version "3.2.0"
1177511770
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
1177611771
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
1177711772

11773+
react-fast-compare@^3.2.0:
11774+
version "3.2.2"
11775+
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
11776+
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
11777+
1177811778
react-helmet-async@^1.2.2:
11779-
version "1.2.3"
11780-
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.2.3.tgz#57326a69304ea3293036eafb49475e9ba454cb37"
11781-
integrity sha512-mCk2silF53Tq/YaYdkl2sB+/tDoPnaxN7dFS/6ZLJb/rhUY2EWGI5Xj2b4jHppScMqY45MbgPSwTxDchKpZ5Kw==
11779+
version "1.3.0"
11780+
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
11781+
integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
1178211782
dependencies:
1178311783
"@babel/runtime" "^7.12.5"
1178411784
invariant "^2.2.4"

0 commit comments

Comments
 (0)