`TypeError: Cannot read properties of null (reading 'entries')` #56

ahkhanjani · 2024-02-26T17:55:34Z

In my Next.js 14.1 project I get the following error log in the server console on every build/dev run:

TypeError: Cannot read properties of null (reading 'entries')
    at useRoute (file:///xxx/node_modules/.pnpm/@vercel+speed-insights@1.0.10_next@14.1.1-canary.51_react@18.2.0/node_modules/@vercel/speed-insights/dist/next/index.mjs:140:40)
    at SpeedInsightsComponent (file:///xxx/node_modules/.pnpm/@vercel+speed-insights@1.0.10_next@14.1.1-canary.51_react@18.2.0/node_modules/@vercel/speed-insights/dist/next/index.mjs:148:17)
    at renderWithHooks (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
    at renderSuspenseBoundary (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5591:5)
    at renderElement (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5994:11)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\react-dom@18.2.0_react@18.2.0\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)

<SpeedInsights /> is used inside <body> in both /pages/_document.tsx and /app/layout.tsx. The error doesn't stop the build process. Happens both in @latest and @canary.

The text was updated successfully, but these errors were encountered:

ahkhanjani · 2024-03-08T15:02:56Z

Closing as it's fixed in next@latest.

jmsherry · 2024-03-08T23:13:03Z

This does not appear to be fixed. I am still getting this in 14.1.3

ahkhanjani · 2024-03-09T07:28:43Z

This does not appear to be fixed. I am still getting this in 14.1.3

@jmsherry Are you using it in pages router? If yes could you try commenting it there and leaving it in app router and run a build?

ingridkindem · 2024-03-18T10:57:31Z

I am getting this error now. Using pages router, with these versions:
"@vercel/speed-insights": "^1.0.10",
"next": "^13.3.0",

ahkhanjani · 2024-03-18T13:05:35Z

I think it's safe to assume this happens when used with /pages.
@feugy @tomocchino someone from Vercel, This has been an issue for a while now.

ingridkindem · 2024-03-19T13:31:21Z

I fixed the problem by deleting the .next folders and rebuilding

lefuncq · 2024-04-04T15:39:01Z

I still have this error even after deleting the .next folders and rebuilding them.
In my case, I only get this error when running the website with NODE_ENV === 'test'.

I tried adding a webpack module alias, but the alias only takes effect on the client side, causing a re-hydration error.

tony-cocco · 2024-04-04T23:25:29Z

I only get this error when running the website with NODE_ENV === 'test'.

Just added this to my application and am getting the same issue when running in test environment. Originally, I saw an error complaining about no next_auth secret, so I added that, but the error persists. Possibly another env variable that isn't present? Or a bad check based on NODE_ENV?

Local build works fine, preview deploy in vercel works fine.

├─ next@14.1.3
├─ @vercel/speed-insights@1.0.10

From digging in the built code, the error stems from this line:

const searchParams = useSearchParams();
...
const finalParams = {
    ...Object.fromEntries(searchParams.entries()), // <--
    ...params || {}
  };

Which comes from next/dist/client/components/navigation.js > useSearchParams:

const readonlySearchParams = (0, _react.useMemo)(()=>{
        if (!searchParams) {
            // When the router is not ready in pages, we won't have the search params
            // available.
            return null;
        }
        return new ReadonlyURLSearchParams(searchParams);
    }, [
        searchParams
    ]);

There is a possibility searchParams is null which would lead to the call here snapping. No idea why it's only happening when I change NODE_ENV to test. As this library appears to handle that already:

function detectEnvironment() {
  try {
    const env = process.env.NODE_ENV;
    if (env === "development" || env === "test") {
      return "development";
    }
  } catch (e) {
  }
  return "production";
}

talpidaex · 2024-04-05T22:01:31Z

I was encountering this error because I added the component to _documents.tsx instead of _app.tsx. When I updated it to _app.tsx, I did not get any errors. Make sure to add _app.tsx.

tony-cocco · 2024-04-05T22:20:26Z

I was encountering this error because I added the component to _documents.tsx instead of _app.tsx. When I updated it to _app.tsx, I did not get any errors. Make sure to add _app.tsx.

I have the components added in _app.tsx.

function AppContent({ Component, pageProps /*, ...props*/ }: AppProps) {
 ...
    <Analytics />
    <SpeedInsights />
 ...
}

Currently I have them conditionally rendered with the equivalent of NODE_ENV !== 'test' as a workaround.

…rtion

…rtion (#73)

ahkhanjani closed this as completed Mar 8, 2024

ahkhanjani reopened this Mar 9, 2024

ingridkindem mentioned this issue Jun 11, 2024

SpeedInsights import causes breaking changes on pages router #72

Closed

feugy added a commit that referenced this issue Jun 12, 2024

fix(#56,#72): useSearchParams might return null and break script inse…

faf5a55

…rtion

feugy added the bug Something isn't working label Jun 12, 2024

feugy added a commit that referenced this issue Jun 12, 2024

fix(#56,#72): useSearchParams might return null and break script inse…

5e6ff8c

…rtion (#73)

phiko-misc mentioned this issue Jul 3, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.11 to 1.0.12 phiko-misc/christmas-meme-calendar#38

Merged

booshja mentioned this issue Jul 4, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.10 to 1.0.12 booshja/portfolio-v4#21

Open

Luen mentioned this issue Jul 4, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.11 to 1.0.12 RummerLab/rummerlab-website#41

Merged

thearyadev mentioned this issue Jul 26, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.11 to 1.0.12 thearyadev/top500-aggregator#231

Closed

jackkershaw mentioned this issue Jul 31, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.10 to 1.0.12 jackkershaw/vital-signs#8

Merged

bamanczak mentioned this issue Aug 18, 2024

[Snyk] Upgrade @vercel/speed-insights from 1.0.10 to 1.0.12 bamanczak/bruncio#48

Merged

syofyanzuhad mentioned this issue Sep 7, 2024

[Snyk] Upgrade: , , , , , classnames, formik, markdown-to-jsx, typescript syofyanzuhad/profile#128

Open

booshja mentioned this issue Sep 8, 2024

[Snyk] Upgrade: , next-plausible booshja/portfolio-v4#22

Open

This was referenced Sep 9, 2024

[Snyk] Upgrade: , , , , , classnames, formik, markdown-to-jsx, typescript syofyanzuhad/profile#130

Open

[Snyk] Upgrade: , , , , , classnames, formik, markdown-to-jsx, typescript syofyanzuhad/profile#133

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`TypeError: Cannot read properties of null (reading 'entries')` #56

`TypeError: Cannot read properties of null (reading 'entries')` #56

ahkhanjani commented Feb 26, 2024 •

edited

Loading

ahkhanjani commented Mar 8, 2024

jmsherry commented Mar 8, 2024

ahkhanjani commented Mar 9, 2024

ingridkindem commented Mar 18, 2024

ahkhanjani commented Mar 18, 2024

ingridkindem commented Mar 19, 2024

lefuncq commented Apr 4, 2024

tony-cocco commented Apr 4, 2024 •

edited

Loading

talpidaex commented Apr 5, 2024

tony-cocco commented Apr 5, 2024 •

edited

Loading

TypeError: Cannot read properties of null (reading 'entries') #56

TypeError: Cannot read properties of null (reading 'entries') #56

Comments

ahkhanjani commented Feb 26, 2024 • edited Loading

ahkhanjani commented Mar 8, 2024

jmsherry commented Mar 8, 2024

ahkhanjani commented Mar 9, 2024

ingridkindem commented Mar 18, 2024

ahkhanjani commented Mar 18, 2024

ingridkindem commented Mar 19, 2024

lefuncq commented Apr 4, 2024

tony-cocco commented Apr 4, 2024 • edited Loading

talpidaex commented Apr 5, 2024

tony-cocco commented Apr 5, 2024 • edited Loading

`TypeError: Cannot read properties of null (reading 'entries')` #56

`TypeError: Cannot read properties of null (reading 'entries')` #56

ahkhanjani commented Feb 26, 2024 •

edited

Loading

tony-cocco commented Apr 4, 2024 •

edited

Loading

tony-cocco commented Apr 5, 2024 •

edited

Loading