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

ahkhanjani commented 4 months ago

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.

ahkhanjani commented 3 months ago

Closing as it's fixed in next@latest.

jmsherry commented 3 months ago

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

ahkhanjani commented 3 months ago

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 commented 3 months ago

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

ahkhanjani commented 3 months ago

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 commented 3 months ago

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

lefuncq commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.

vercel / speed-insights

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