Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ahkhanjani opened this issue Feb 26, 2024 · 10 comments
Open

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

ahkhanjani opened this issue Feb 26, 2024 · 10 comments
Labels
bug Something isn't working

Comments

@ahkhanjani
Copy link

ahkhanjani commented Feb 26, 2024

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/@[email protected][email protected][email protected]/node_modules/@vercel/speed-insights/dist/next/index.mjs:140:40)
    at SpeedInsightsComponent (file:///xxx/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vercel/speed-insights/dist/next/index.mjs:148:17)
    at renderWithHooks (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
    at renderSuspenseBoundary (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5591:5)
    at renderElement (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5994:11)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (xxx\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (xxx\node_modules\.pnpm\[email protected][email protected]\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
Copy link
Author

Closing as it's fixed in next@latest.

@jmsherry
Copy link

jmsherry commented Mar 8, 2024

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

@ahkhanjani ahkhanjani reopened this Mar 9, 2024
@ahkhanjani
Copy link
Author

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
Copy link

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

@ahkhanjani
Copy link
Author

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
Copy link

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

@lefuncq
Copy link

lefuncq commented Apr 4, 2024

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
Copy link

tony-cocco commented Apr 4, 2024

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.

├─ [email protected]
├─ @vercel/[email protected]

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
Copy link

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
Copy link

tony-cocco commented Apr 5, 2024

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.

@feugy feugy added the bug Something isn't working label Jun 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants