@autobusal/common 1.8.1 → 1.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/Meta.tsx +89 -20
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,51 @@
|
|
|
3
3
|
All notable changes to `@autobusal/common` are documented here. This project follows
|
|
4
4
|
[Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
|
|
5
5
|
|
|
6
|
+
## [1.8.3] - 2026-07-31
|
|
7
|
+
|
|
8
|
+
### Fixed
|
|
9
|
+
|
|
10
|
+
- **`Meta.tsx`'s `useSoleMetaOwnership` no longer runs on every render.**
|
|
11
|
+
It fired on every render of every `<Meta>` usage (136 call sites, no
|
|
12
|
+
dependency array) and directly removed `<head>` children via raw DOM
|
|
13
|
+
`.remove()` calls each time. The duplicate-tag problem it exists for -
|
|
14
|
+
React's `createRoot` not reconciling against tags baked into the
|
|
15
|
+
prerendered static HTML - can only exist before React's first render;
|
|
16
|
+
every render after that, `<title>`/`<meta>`/`<link>` in `<head>` are
|
|
17
|
+
exclusively React 19's own hoisting mechanism's doing, and it already
|
|
18
|
+
correctly swaps them out as components mount/unmount with no help
|
|
19
|
+
needed. Re-running this raw removal on every navigation instead raced
|
|
20
|
+
that hoisting: it could delete a node mid-transition that React's own
|
|
21
|
+
reconciler still held a reference to, and the next time React tried to
|
|
22
|
+
remove or replace that now-detached node, `parentNode` was null and it
|
|
23
|
+
threw an uncaught `TypeError: Cannot read properties of null (reading
|
|
24
|
+
'removeChild')` - not render-phase, so no `ErrorBoundary` catches it,
|
|
25
|
+
silently aborting whatever navigation was in flight (URL updates,
|
|
26
|
+
page never re-renders). This is the actual root cause of the frozen-
|
|
27
|
+
navigation bug worked around piecemeal in `@autobusal/providers`
|
|
28
|
+
1.6.6-1.6.8, `@autobusal/hooks` 1.3.1, and `@autobusal/auth`
|
|
29
|
+
1.5.2-1.5.4 - all of which targeted `GoogleReCaptchaProvider` as a
|
|
30
|
+
contributing trigger, but the crash reproduced identically with that
|
|
31
|
+
provider removed entirely, on ~any route rendering `<Meta>`. Now
|
|
32
|
+
scoped to a module-level flag so the cleanup runs exactly once, on the
|
|
33
|
+
app's first `<Meta>` mount - it does its one real job (wiping stale
|
|
34
|
+
prerendered tags before first paint) and never touches the DOM again.
|
|
35
|
+
|
|
36
|
+
## [1.8.2] - 2026-07-30
|
|
37
|
+
|
|
38
|
+
### Fixed
|
|
39
|
+
|
|
40
|
+
- **`Meta.tsx` duplicate description/canonical/OG/Twitter tags.** The
|
|
41
|
+
existing title-only dedup (`useSoleTitleOwnership`, since 1.5.1) is now
|
|
42
|
+
`useSoleMetaOwnership` and covers every tag Meta renders, not just
|
|
43
|
+
`<title>`. Surfaced by the new build-time prerender step: React doesn't
|
|
44
|
+
reconcile against tags already sitting in `<head>` from a source other
|
|
45
|
+
than its own current render (a prerendered snapshot's baked-in
|
|
46
|
+
description, a leftover from a pre-locale-detection render, ...), so
|
|
47
|
+
multiple `<meta name="description">`/`og:description`/etc could coexist
|
|
48
|
+
- crawlers commonly read the FIRST occurrence, which could be the stale
|
|
49
|
+
one, not the page's real content.
|
|
50
|
+
|
|
6
51
|
## [1.8.1] - 2026-07-30
|
|
7
52
|
|
|
8
53
|
### Fixed
|
package/Meta.tsx
CHANGED
|
@@ -31,26 +31,78 @@ const withBrand = (value: string): string => (brand ? `${ value } - ${ brand }`
|
|
|
31
31
|
// (verified: zero [data-react-helmet] tags in the DOM on any route, on any
|
|
32
32
|
// page load, even before this session's changes).
|
|
33
33
|
//
|
|
34
|
-
// React does NOT dedupe
|
|
35
|
-
//
|
|
36
|
-
//
|
|
37
|
-
//
|
|
38
|
-
//
|
|
39
|
-
//
|
|
40
|
-
//
|
|
41
|
-
//
|
|
42
|
-
//
|
|
43
|
-
//
|
|
44
|
-
//
|
|
45
|
-
|
|
34
|
+
// React does NOT dedupe these tags against ones that were already sitting in
|
|
35
|
+
// <head> from something OTHER than React's own current render pass - a
|
|
36
|
+
// static tag baked into index.html at build time, or (discovered while
|
|
37
|
+
// building the build-time prerender step) React's own PREVIOUS output
|
|
38
|
+
// baked into a prerendered dist/{path}/index.html snapshot. `createRoot`
|
|
39
|
+
// doesn't adopt/reconcile against existing markup the way `hydrateRoot`
|
|
40
|
+
// would, so every one of these tags - title, description, canonical,
|
|
41
|
+
// og:*, twitter:* - could end up duplicated: a page's real content
|
|
42
|
+
// alongside a stale prerendered description, or (worse) a different
|
|
43
|
+
// page/language's leftover copy. `document.title` happening to still
|
|
44
|
+
// resolve correctly (spec: first <title> in tree order) hid this for
|
|
45
|
+
// title alone; a description/canonical duplicate is worse, since crawlers
|
|
46
|
+
// commonly pick the FIRST occurrence, which is the potentially-stale one.
|
|
47
|
+
//
|
|
48
|
+
// This makes Meta the sole owner of every tag it manages: for each one, if
|
|
49
|
+
// it has a current value, keep the element carrying that value and remove
|
|
50
|
+
// every other element matching the same selector; if it has no value for
|
|
51
|
+
// this page (description/keywords/image are optional), remove all of
|
|
52
|
+
// them, since nothing here can claim the page has one.
|
|
53
|
+
type OwnedTag = { selector: string, attr: 'text' | string, value?: string };
|
|
54
|
+
|
|
55
|
+
// Edited: Ferjolt Ozuni - Date: 2026-07-31
|
|
56
|
+
// Bug: this ran on EVERY render of EVERY <Meta> usage (no dependency array),
|
|
57
|
+
// removing head children via raw DOM .remove() calls each time. But the
|
|
58
|
+
// duplicate-tag problem this exists for is a ONE-TIME artifact of the
|
|
59
|
+
// prerendered static HTML `createRoot` never reconciles against - it can
|
|
60
|
+
// only exist before React's first render. Every render after that, these
|
|
61
|
+
// tags are exclusively React 19's own hoisting mechanism's doing, and
|
|
62
|
+
// React already correctly swaps them out as components mount/unmount with
|
|
63
|
+
// no help needed. Re-running this raw removal on every subsequent
|
|
64
|
+
// navigation raced that hoisting instead: this effect could delete a
|
|
65
|
+
// <title>/<meta> node mid-transition that React's own reconciler still
|
|
66
|
+
// held a reference to (e.g. while the outgoing page's <Meta> was still
|
|
67
|
+
// completing its unmount), leaving React's fiber pointing at a detached
|
|
68
|
+
// node - the next time React tried to remove or replace it, `parentNode`
|
|
69
|
+
// was null and it threw an uncaught `TypeError: Cannot read properties of
|
|
70
|
+
// null (reading 'removeChild')`. That's not render-phase, so no
|
|
71
|
+
// ErrorBoundary catches it, and it silently aborted whatever navigation
|
|
72
|
+
// was in flight: the URL would update but the page never re-rendered -
|
|
73
|
+
// reproduced on ~every route that renders <Meta>, i.e. nearly every page.
|
|
74
|
+
// Scoping the cleanup to the app's first-ever <Meta> mount (module-scope
|
|
75
|
+
// flag, not per-component-instance state, since every route mounts a NEW
|
|
76
|
+
// Meta instance) keeps it doing its one real job - wiping stale prerendered
|
|
77
|
+
// tags before React's first paint - without ever again running once React
|
|
78
|
+
// is the sole owner of this part of the DOM.
|
|
79
|
+
let hasCleanedPrerenderedTags = false;
|
|
80
|
+
|
|
81
|
+
const useSoleMetaOwnership = (tags: OwnedTag[]): void => {
|
|
46
82
|
useEffect(() => {
|
|
47
|
-
|
|
48
|
-
|
|
83
|
+
if (hasCleanedPrerenderedTags) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
hasCleanedPrerenderedTags = true;
|
|
49
88
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
89
|
+
tags.forEach(({ selector, attr, value }) => {
|
|
90
|
+
const elements = [...document.querySelectorAll(`head > ${ selector }`)];
|
|
91
|
+
|
|
92
|
+
if (value === undefined) {
|
|
93
|
+
elements.forEach(el => el.remove());
|
|
94
|
+
return;
|
|
53
95
|
}
|
|
96
|
+
|
|
97
|
+
const mine = elements.find(el => (
|
|
98
|
+
attr === 'text' ? el.textContent === value : el.getAttribute(attr) === value
|
|
99
|
+
));
|
|
100
|
+
|
|
101
|
+
elements.forEach(el => {
|
|
102
|
+
if (el !== mine) {
|
|
103
|
+
el.remove();
|
|
104
|
+
}
|
|
105
|
+
});
|
|
54
106
|
});
|
|
55
107
|
});
|
|
56
108
|
};
|
|
@@ -100,8 +152,25 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
|
|
|
100
152
|
const fullTitle = withBrand(title);
|
|
101
153
|
const canonicalUrl = useCanonicalUrl(url);
|
|
102
154
|
const location = useLocation();
|
|
103
|
-
|
|
104
|
-
|
|
155
|
+
const robots = noIndex ? 'noindex, nofollow' : 'index, follow';
|
|
156
|
+
|
|
157
|
+
useSoleMetaOwnership([
|
|
158
|
+
{ selector: 'title', attr: 'text', value: fullTitle },
|
|
159
|
+
{ selector: 'meta[name="robots"]', attr: 'content', value: robots },
|
|
160
|
+
{ selector: 'meta[name="keywords"]', attr: 'content', value: keywords },
|
|
161
|
+
{ selector: 'meta[name="description"]', attr: 'content', value: description },
|
|
162
|
+
{ selector: 'link[rel="canonical"]', attr: 'href', value: canonicalUrl },
|
|
163
|
+
{ selector: 'meta[property="og:type"]', attr: 'content', value: type },
|
|
164
|
+
{ selector: 'meta[property="og:title"]', attr: 'content', value: fullTitle },
|
|
165
|
+
{ selector: 'meta[property="og:description"]', attr: 'content', value: description },
|
|
166
|
+
{ selector: 'meta[property="og:image"]', attr: 'content', value: image },
|
|
167
|
+
{ selector: 'meta[property="og:url"]', attr: 'content', value: canonicalUrl },
|
|
168
|
+
{ selector: 'meta[property="og:site_name"]', attr: 'content', value: brand },
|
|
169
|
+
{ selector: 'meta[name="twitter:card"]', attr: 'content', value: 'summary_large_image' },
|
|
170
|
+
{ selector: 'meta[name="twitter:title"]', attr: 'content', value: fullTitle },
|
|
171
|
+
{ selector: 'meta[name="twitter:description"]', attr: 'content', value: description },
|
|
172
|
+
{ selector: 'meta[name="twitter:image"]', attr: 'content', value: image }
|
|
173
|
+
]);
|
|
105
174
|
usePageviewTracking(location.pathname + location.search, fullTitle);
|
|
106
175
|
|
|
107
176
|
return (
|
|
@@ -109,7 +178,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
|
|
|
109
178
|
<title>{ fullTitle }</title>
|
|
110
179
|
|
|
111
180
|
{/* Robots */}
|
|
112
|
-
<meta name="robots" content={
|
|
181
|
+
<meta name="robots" content={ robots } />
|
|
113
182
|
|
|
114
183
|
{/* Standard Meta Tags */}
|
|
115
184
|
{ keywords && <meta name="keywords" content={ keywords } /> }
|