[WIP] chore(frontend): upgrade react, next and eslint, update next configs#1243
[WIP] chore(frontend): upgrade react, next and eslint, update next configs#1243
Conversation
There was a problem hiding this comment.
Pull request overview
This PR upgrades the project to React 19, Next.js 16, and ESLint 9, representing a major version bump across the core frontend stack. The description notes that the legacy codebase may have issues with React 19's stricter linting rules (specifically the set-state-in-effect check).
Key Changes
- React & Next.js Upgrade: React 18→19, Next.js 15.5→16.1, with new React Compiler and experimental Turbopack caching enabled
- ESLint Migration: Complete migration from ESLint 8 (
.eslintrc.json) to ESLint 9 flat config format (eslint.config.mjs) - TypeScript Configuration: Updated JSX transform to
react-jsxfor React 19 compatibility
Reviewed changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Upgrades React to 19.2.3, Next.js to 16.1.1, ESLint to 9.39.2, and related tooling; adds babel-plugin-react-compiler |
| package-lock.json | Lock file updates reflecting all dependency version changes including transitive dependencies |
| tsconfig.json | Updates JSX compiler option from "preserve" to "react-jsx" for React 19 compatibility |
| next.config.ts | Enables React Compiler and experimental Turbopack file system caching for improved performance |
| eslint.config.mjs | New ESLint 9 flat config file replacing the old .eslintrc.json format |
| rules: { | ||
| "prettier/prettier": "warn", | ||
| "unused-imports/no-unused-imports": "warn", | ||
| "unused-imports/no-unused-vars": "warn", |
There was a problem hiding this comment.
The rule "unused-imports/no-unused-vars" is configured, but in the old .eslintrc.json this rule was not present - only "unused-imports/no-unused-imports" was configured. This adds a new linting rule that may cause unexpected warnings. Consider whether this additional rule is intentional or should be removed to maintain consistency with the previous configuration.
| "unused-imports/no-unused-vars": "warn", |
| "react": "19.2.3", | ||
| "react-dom": "19.2.3", |
There was a problem hiding this comment.
The React and React-DOM versions are pinned to exact versions (19.2.3) without using caret (^) or tilde (~) ranges. This is inconsistent with other dependencies in the project and may cause issues with dependency resolution. Consider using "^19.2.3" instead to allow patch version updates.
| "react": "19.2.3", | |
| "react-dom": "19.2.3", | |
| "react": "^19.2.3", | |
| "react-dom": "^19.2.3", |
| "@types/react-dom": "^19.2.3", | ||
| "@types/react-virtualized": "^9.22.0", | ||
| "@types/string-similarity": "^4.0.2", | ||
| "babel-plugin-react-compiler": "^1.0.0", |
There was a problem hiding this comment.
The babel-plugin-react-compiler is listed as a devDependency but is not configured anywhere in the codebase that's visible in this diff. With reactCompiler: true in next.config.ts, Next.js 16 should handle the React Compiler automatically. This dependency may be redundant unless there's a specific Babel configuration that requires it.
| "babel-plugin-react-compiler": "^1.0.0", |
| import { defineConfig } from "eslint/config"; | ||
| import nextVitals from "eslint-config-next/core-web-vitals"; | ||
|
|
||
| import prettierConfig from "eslint-config-prettier"; | ||
| import prettierPlugin from "eslint-plugin-prettier"; | ||
| import unusedImports from "eslint-plugin-unused-imports"; | ||
|
|
||
| export default defineConfig([ | ||
| nextVitals, | ||
| prettierConfig, | ||
|
|
||
| { | ||
| plugins: { | ||
| prettier: prettierPlugin, | ||
| "unused-imports": unusedImports, | ||
| }, | ||
| rules: { | ||
| "prettier/prettier": "warn", | ||
| "unused-imports/no-unused-imports": "warn", | ||
| "unused-imports/no-unused-vars": "warn", | ||
| }, | ||
| }, | ||
| ]); No newline at end of file |
There was a problem hiding this comment.
The old ESLint configuration file .eslintrc.json should be deleted since this PR migrates to ESLint 9's flat config format. Having both configuration files present could cause confusion and unexpected behavior.
| import { defineConfig } from "eslint/config"; | ||
| import nextVitals from "eslint-config-next/core-web-vitals"; | ||
|
|
||
| import prettierConfig from "eslint-config-prettier"; | ||
| import prettierPlugin from "eslint-plugin-prettier"; | ||
| import unusedImports from "eslint-plugin-unused-imports"; | ||
|
|
||
| export default defineConfig([ |
There was a problem hiding this comment.
The import statement uses defineConfig from "eslint/config", but this should be imported from "eslint-define-config" package or removed entirely. ESLint 9 flat config doesn't require a defineConfig wrapper - you can export the array directly. The correct approach for ESLint 9 is:
export default [
nextVitals,
prettierConfig,
// ...
];| @@ -0,0 +1,23 @@ | |||
| import { defineConfig } from "eslint/config"; | |||
| import nextVitals from "eslint-config-next/core-web-vitals"; | |||
There was a problem hiding this comment.
The import statement uses a non-standard path. According to the package.json, the package is "eslint-config-next", so the import should be:
import nextVitals from "eslint-config-next";Not "eslint-config-next/core-web-vitals". While this may work with some configurations, the standard ESLint 9 flat config for Next.js should import the package directly.
| import nextVitals from "eslint-config-next/core-web-vitals"; | |
| import nextVitals from "eslint-config-next"; |
update to react 19, next 16, eslint 9
但是我们的史山代码跑一下 eslint 就会爆炸(react 19 有一些很严格的检查比如 set-state-in-effect)