Fix npm dependency resolution conflict between React 18/19#1
Conversation
…clerk-expo Co-authored-by: SMSDAO <144380926+SMSDAO@users.noreply.github.com>
Co-authored-by: SMSDAO <144380926+SMSDAO@users.noreply.github.com>
Co-authored-by: SMSDAO <144380926+SMSDAO@users.noreply.github.com>
|
@copilot fix all failing test run again must pass to green. |
There was a problem hiding this comment.
Pull request overview
This PR attempts to resolve React dependency conflicts between React 18 (required by React Native 0.73/Expo 50) and React 19 (potentially pulled in by transitive dependencies). The changes focus on pinning React versions across the monorepo, updating Clerk authentication library, adding webpack tooling for CI validation, and removing UTF-8 BOM characters from source files.
Changes:
- Added npm overrides to force React 18.2.0 and react-dom 18.2.0 across all workspaces
- Updated @clerk/clerk-expo and added react-dom to mobile workspace
- Added webpack configuration and toolchain for CI build validation
- Stripped UTF-8 BOM from 50+ source files to prevent JSON parse errors
Reviewed changes
Copilot reviewed 56 out of 57 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| package.json | Added npm overrides for React version pinning, added webpack/ts-loader devDependencies |
| mobile/package.json | Updated @clerk/clerk-expo to ^2.19.22, added react-dom 18.2.0 for web builds |
| web/package.json | Pinned React versions to exact 18.2.0 (removed caret), removed non-existent mdx package |
| webpack.config.js | New webpack configuration for CI validation workflow |
| web/tsconfig.json | Removed UTF-8 BOM character |
| web/tailwind.config.js | Removed UTF-8 BOM character |
| web/postcss.config.js | Removed UTF-8 BOM character |
| web/next.config.js | Removed UTF-8 BOM character |
| web/lib/**/*.ts | Removed UTF-8 BOM characters from utility files |
| web/components/**/*.tsx | Removed UTF-8 BOM characters from React components |
| web/app/**/*.tsx | Removed UTF-8 BOM characters from app routes and layouts |
| web/app/robots.ts | Removed UTF-8 BOM character (file has format issues) |
| web/app/sitemap.ts | Removed UTF-8 BOM character |
| web/.env.example | Removed UTF-8 BOM character |
| shared/types/index.ts | Removed UTF-8 BOM character |
| desktop/package.json | Removed UTF-8 BOM character |
Comments suppressed due to low confidence (1)
web/app/robots.ts:7
- This file appears to be formatted as a plain robots.txt file, but in Next.js app directory, robots.ts should be a TypeScript file that exports a function returning robot rules. This file should export a function like:
export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', disallow: ['/api/', '/dashboard/', '/admin/'] }, sitemap: 'https://algodon.app/sitemap.xml' }; }. The current format will cause a build error.
User-agent: *
Allow: /
Disallow: /api/
Disallow: /dashboard/
Disallow: /admin/
Sitemap: https://algodon.app/sitemap.xml
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const path = require('path'); | ||
|
|
||
| module.exports = { | ||
| mode: 'production', | ||
| entry: './web/app/layout.tsx', | ||
| output: { | ||
| path: path.resolve(__dirname, 'dist'), | ||
| filename: 'bundle.js', | ||
| }, | ||
| resolve: { | ||
| extensions: ['.ts', '.tsx', '.js', '.jsx'], | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.tsx?$/, | ||
| use: 'ts-loader', | ||
| exclude: /node_modules/, | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
There was a problem hiding this comment.
This webpack configuration has several critical issues: (1) The entry point "./web/app/layout.tsx" is a Next.js-specific file that imports Next.js modules (Metadata, ClerkProvider, etc.) which cannot be bundled by webpack alone. (2) The file uses TypeScript path aliases like "@/components" that are not configured in webpack's resolve.alias. (3) There is no tsconfig.json at the root level for ts-loader to use. This configuration will fail during the webpack build step in the CI workflow. Consider creating a simpler entry point specifically for CI validation or configure webpack properly with all necessary loaders, plugins, and path resolution.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 56 out of 57 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| User-agent: * | ||
| Allow: / | ||
| Disallow: /api/ | ||
| Disallow: /dashboard/ |
There was a problem hiding this comment.
web/app/robots.ts contains raw robots.txt directives, which is not valid TypeScript. This will break tsc/next build for the web app. Either rename this to web/app/robots.txt, or convert it to a proper Next.js robots.ts implementation that exports a MetadataRoute.Robots object/function.
There was a problem hiding this comment.
@copilot Either rename this to web/app/robots.txt, or convert it to a proper Next.js robots.ts implementation that exports a MetadataRoute.Robots object/function.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 56 out of 57 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| User-agent: * | ||
| Allow: / | ||
| Disallow: /api/ | ||
| Disallow: /dashboard/ |
There was a problem hiding this comment.
This file contains raw robots.txt directives but has a .ts extension, which is invalid TypeScript syntax. This will break TypeScript compilation and Next.js builds.
For Next.js App Router, this should either be:
- Renamed to
robots.txtand moved to the public directory, OR - Converted to a proper Next.js
robots.tsfile that exports a MetadataRoute.Robots object or function.
Example of proper Next.js robots.ts format:
import { MetadataRoute } from 'next';
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: ['/api/', '/dashboard/', '/admin/'],
},
sitemap: 'https://algodon.app/sitemap.xml',
};
}There was a problem hiding this comment.
Pull request overview
Copilot reviewed 56 out of 57 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| mode: 'production', | ||
| entry: './web/app/layout.tsx', | ||
| output: { |
There was a problem hiding this comment.
This webpack config is unlikely to succeed in CI: the entry ./web/app/layout.tsx is a Next.js App Router file that imports Next-specific modules and CSS (./styles/globals.css). With only ts-loader configured (and no CSS loader / Next-specific handling), npx webpack will fail to resolve/compile these imports.
| resolve: { | ||
| extensions: ['.ts', '.tsx', '.js', '.jsx'], | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.tsx?$/, | ||
| use: 'ts-loader', | ||
| exclude: /node_modules/, |
There was a problem hiding this comment.
This config also doesn't account for the TypeScript path aliases used throughout the web app (e.g. @/components/* in web/tsconfig.json) and ts-loader will look for a root tsconfig.json by default. To make npx webpack work, either point ts-loader at web/tsconfig.json and configure alias resolution (or use a separate minimal entry file without @/... imports).
npm was resolving
react-dom@19.xdue to@clerk/clerk-expo's>=18peer dependency, conflicting with React Native 0.73/Expo 50's React 18.x requirement.Dependency Resolution
react@18.2.0andreact-dom@18.2.0across monorepo@clerk/clerk-expofrom^1.0.0to^2.19.22(explicit React 18 support)react-dom@18.2.0to mobile workspace (satisfies peer dependency for web builds)mdx@^2.3.0dependency from web packageBuild Configuration
webpack.config.jswith ts-loader for CI workflowCode Quality
Note: React 19 upgrade blocked on React Native/Expo ecosystem support. RN 0.73 requires React 18.x.
Original prompt
This pull request was created from Copilot chat.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.