fix: resolve dev startup issues for #35#36
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdded app icons to Next metadata, set ChangesMetadata & Hydration
Navigation Branding
Build Configuration & Module Resolution
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
next.config.mjs (1)
10-20: Scoping optional-module aliases to client builds is a best practice, though risk is minimal here.These modules (
@react-native-async-storage/async-storageandpino-pretty) are not directly imported in application code—they appear only in dependency metadata as optional peer dependencies. However, scoping aliases with!isServerremains cleaner and prevents accidental transitive masking on the server side.Suggested adjustment
- webpack: (config) => { + webpack: (config, { isServer }) => { config.resolve ??= {} config.resolve.alias ??= {} - Object.assign(config.resolve.alias, { - '@react-native-async-storage/async-storage': false, - 'pino-pretty': false, - }) + if (!isServer) { + Object.assign(config.resolve.alias, { + '@react-native-async-storage/async-storage': false, + 'pino-pretty': false, + }) + } return config },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@next.config.mjs` around lines 10 - 20, The webpack config currently unconditionally sets config.resolve.alias for '@react-native-async-storage/async-storage' and 'pino-pretty'; change the webpack function signature to accept the build context (webpack: (config, { isServer }) => { ... }) and only assign those optional-module aliases when !isServer (i.e., wrap the Object.assign(config.resolve.alias, {...}) call in if (!isServer) { ... }), keeping the same config.resolve and alias keys to avoid masking server-side resolution.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/layout.tsx`:
- Around line 16-20: The metadata icons object currently sets apple to an SVG
which iOS doesn't support; update the icons.apple value (in the exported
metadata/icons object) from '/stability.svg' to a PNG (e.g. '/stability.png'),
keep icons.icon and icons.shortcut as SVG, and ensure the corresponding PNG
asset is present in your public/static assets.
---
Nitpick comments:
In `@next.config.mjs`:
- Around line 10-20: The webpack config currently unconditionally sets
config.resolve.alias for '@react-native-async-storage/async-storage' and
'pino-pretty'; change the webpack function signature to accept the build context
(webpack: (config, { isServer }) => { ... }) and only assign those
optional-module aliases when !isServer (i.e., wrap the
Object.assign(config.resolve.alias, {...}) call in if (!isServer) { ... }),
keeping the same config.resolve and alias keys to avoid masking server-side
resolution.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: cb2e1ce8-e185-4ef0-b908-d54b9be45bf0
📒 Files selected for processing (3)
app/layout.tsxcomponents/navigation.tsxnext.config.mjs
1 participant
Summary
This PR fixes the setup and local development startup issues reported in
#35.During project setup, the app was showing multiple confusing errors and warnings, including missing Next.js chunk files, a broken favicon request, hydration warnings on the root layout, and noisy wallet SDK dependency resolution errors. Together, these made the local startup experience look broken even when parts of the app still rendered.
Closes #35.
Problem
While running the app locally with
npm run dev, the following issues were observed:/_next/static/chunks/...requests returning404/favicon.icoreturning500Extra attributes from the server: class,styleThe main setup problem was that Next.js dev/build artifacts were conflicting with static export output, and the app also had a few missing or mismatched asset/config details that amplified the startup noise.
Root Cause
The issues came from a combination of small setup problems:
next.config.mjswas using a customdistDir: 'out'together withoutput: 'export'/logo.svg, which was not present in the reponext-themeswas mutating root attributes during hydration, triggering a warning on<html>Result
After these changes, the local development experience is cleaner and more stable:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit