page.tsx causes internal server error when searchParams is used

[geotrev]

Link to the code that reproduces this issue or a replay of the bug

https://github.com/geotrev/next-server-search-params

To Reproduce

1. Create a new app/<route>/page.tsx file
2. Define the component using searchParams
3. Deploy to netlify using a basic configuration (next build)
4. Attempt to navigate to the new route via browser.

This occurs with or without the use of this metadata export:

export const dynamic = 'force-dynamic'

See both live examples here:

• No force-dynamic: link
• With force-dynamic: link

Current vs. Expected behavior

Current: Page throws 500 internal server error

Expected: page loads normally.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 18.12.1
  npm: 9.8.1
  Yarn: N/A
  pnpm: 8.7.5
Relevant Packages:
  next: 13.4.20-canary.27
  eslint-config-next: 13.4.19
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

This is a netlify + next deploy as shown in the reproduction repo.

---

The latest canary release has a completely new error:

 Runtime.ImportModuleError - Error: Cannot find module 'styled-jsx/style' Require stack: - /var/task/node_modules/next/dist/server/import-overrides.js - /var/task/node_modules/next/dist/server/require-hook.js - /var/task/node_modules/next/dist/server/next-server.js - /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js - /var/task/___netlify-handler.js - /var/runtime/index.mjs 

Stack trace:

Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx/style'
Require stack:
- /var/task/node_modules/next/dist/server/import-overrides.js
- /var/task/node_modules/next/dist/server/require-hook.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js
- /var/task/___netlify-handler.js
- /var/runtime/index.mjs
    at _loadUserApp (file:///var/runtime/index.mjs:1061:17)
    at async UserFunction.js.module.exports.load (file:///var/runtime/index.mjs:1093:21)
    at async start (file:///var/runtime/index.mjs:1256:23)
    at async file:///var/runtime/index.mjs:1262:1

[moonman239]

Within the "app" folder, please run "npm install" and tell me if it installs "styled-jsx" and if your problem is fixed.

[geotrev]

Quick clarification: styled-jsx is unrelated to the problem I’m reporting and only comes up when next canary is installed. I’m not sure why that error is occurring, and only included it to fulfill the “verify canary release” requirement. 😅

[moonman239]

@geotrev be that as it may, let's try it anyway and see if it helps you. Sometimes, seemingly unrelated problems are actually related.

And if I turn out to be wrong, we'll need to look at your error log to diagnose the issue.

[geotrev]

@moonman239 unfortunately, it doesn't look like npm install at the root or in app/ changed anything. I also tried manual install of styled-jsx, but no luck. Here is a screenshot of the result (again, this is only when using next@canary):

So, I guess a fair thing to say right now is I'm seeing two distinct errors, one when I'm on the canary build, and then another when I'm on the non-canary build related to searchParams.

Appreciate the quick responses btw!

EDIT: referring to the above separate bugs, here are the reproduction branches in my example repo:

• main: next@canary bug
• test/server-page: searchParams bug using app/test/page.tsx
• test/dynamic-page: searchParams bug, but with force-dynamic, using app/test/page.tsx