英文:
Next.js 13 + AWS CDK v2, amplify. 500 Internal Server Error in dynamic routing SSR
问题
使用Amplify和CDKv2创建了一个小的Next.js 13项目。当我访问URL -> item/[id] 时，它会给我500个内部服务器错误。这个问题只在我部署到生产环境后出现。在本地使用npm run dev测试时一切正常。
在任何地方都找不到解决这个问题的方法。
注意 -> 没有编写API。只是从应用程序目录内获取items.tsx文件。它导出一个名为"items"的变量，其中包含一些JSON项的列表。
尝试了一些方法。
-
在item/[id]页面.tsx中进行了一些console.log。其中没有一个被记录。
-
尝试了清理安装npm包，但没有效果。
-
检查了Web的控制台。显示内部服务器错误500和"客户端异常已发生"。
-
检查Amplify的构建阶段（前端），我在那里唯一看到的有用信息是我的页面被视为服务器。
路由（应用程序） 大小 首次加载JS
├ λ /(.)item/[id] 0 B 0 B
└ λ /item/[id] 777 B 99 kB
[INFO]: λ (Server) 服务器端在运行时呈现（使用getInitialProps或getServerSideProps）
-
检查访问日志
访问日志图像1
访问日志图像2
在这里我看到它说x-edge-detailed-result-type中出现了OriginError。
花了很多时间尝试修复这个OriginError，尝试以不同的方式修改next.config.js，包括各种标头，甚至包括"*"。
英文:
Made a small next.js13 project with amplify and CDKv2. When I go to url -> item/[id] it gives me 500 internal Server error. This issue is only after I deploy to production. Everything works in local when i test it with npm run dev.
Couldnt find any solution to this problem anywhere.
Note -> there are no API written. just getting items.tsx file from inside app directory.it exports one variable called items which is a list of json items.
Tried few things.
- Did some console.log in the item/[id] page.tsx. None of them gets logged.
- tried clean installing npm packages, doesnt work.
- checked console of web. says internal server error 500 and "A client-side exception has occured"
- checked the build stage of Amplify (Frontend), the only useful thing i saw there, is my page was treated as server.
Route (app) Size First Load JS
├ λ /(.)item/[id] 0 B 0 B
└ λ /item/[id] 777 B 99 kB
[INFO]: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
- Checked Access Logs
Access Logs Image 1
Access Logs Image 2
Here I see it says OriginError in x-edge-detailed-result-type.
Spent alot of time looking to fix this OriginError, tried modifying next.config.js in different ways with all sorts of headers, even with "*".
答案1
得分: 2
我启用了Amplify Hosting Compute Logs，并在CloudWatch日志中看到了以下内容：
> 错误[ERR_PACKAGE_PATH_NOT_EXPORTED]：包子路径'./server.edge'
> 在'/var/task/node_modules/react-dom/package.json'中未被"exports"定义
> （node：internal/errors:387:5）在throwExportsNotFound处
> （node：internal/modules/esm/resolve:365:9）在packageExportsResolve处
> （node：internal/modules/esm/resolve:649:3）在resolveExports处
> （node：internal/modules/cjs/loader:556:36）在Function.Module._findPath处
> （node：internal/modules/cjs/loader:596:31） .....（还有几行）
> ... code：'ERR_PACKAGE_PATH_NOT_EXPORTED' }
这似乎是一个已知问题。链接
有一个简单的Amplify修复方法：
- 设置环境变量
__NEXT_PRIVATE_PREBUNDLED_REACT=next - 在前端的构建设置中添加服务器运行时访问权限：
build：
commands：
- env | grep -e __NEXT_PRIVATE_PREBUNDLED_REACT >> .env.production
- npm run build
这应该解决这个问题。
英文:
I enabled Amplify Hosting Compute Logs and saw this in CloudWatch logs:
> Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge'
> is not defined by "exports" in
> /var/task/node_modules/react-dom/package.json at new NodeError
> (node:internal/errors:387:5) at throwExportsNotFound
> (node:internal/modules/esm/resolve:365:9) at packageExportsResolve
> (node:internal/modules/esm/resolve:649:3) at resolveExports
> (node:internal/modules/cjs/loader:556:36) at Function.Module._findPath
> (node:internal/modules/cjs/loader:596:31) .....(some more few lines)
> ... code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' }
This seems to be a known issue. Link
There is a simple amplify fix for this:
- Set environment variable
__NEXT_PRIVATE_PREBUNDLED_REACT=next - Add server runtime access to build settings of your frontend:
build:
commands:
- env | grep -e __NEXT_PRIVATE_PREBUNDLED_REACT >> .env.production
- npm run build
This should solve the issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论