@nx/react 23.1.0-beta.5 → 23.1.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# React 18 -> 19 Migration Instructions for LLM
|
|
2
2
|
|
|
3
|
-
Migrate the Nx workspace's React projects from 18 to 19. Run the codemods first, fix the rest by hand, build after each project.
|
|
3
|
+
Migrate the Nx workspace's React projects from 18 to 19. Run the codemods first, fix the rest by hand, typecheck and build after each project.
|
|
4
4
|
|
|
5
5
|
## Step 1: Codemods
|
|
6
6
|
|
|
@@ -35,17 +35,55 @@ npx types-react-codemod@latest refobject-defaults ./PROJECT_PATH # RefObje
|
|
|
35
35
|
|
|
36
36
|
## Step 4: Types
|
|
37
37
|
|
|
38
|
-
`@types/react@19
|
|
38
|
+
`@types/react@19` moves the `JSX` namespace out of global scope into the `react` module (`React.JSX`); `useRef` needs an initial arg; implicit `children` is removed (declare it on props). The `scoped-jsx` codemod (part of `preset-19`) rewrites JSX type _usages_: it points `JSX.Element`, `JSX.IntrinsicElements`, and the like at the `react`-scoped namespace.
|
|
39
|
+
|
|
40
|
+
It does NOT rewrite global `JSX` _augmentations_. A custom element or web component typed with a global augmentation:
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
declare global {
|
|
44
|
+
namespace JSX {
|
|
45
|
+
interface IntrinsicElements {
|
|
46
|
+
'my-element': ...;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
no longer merges into the JSX that React resolves under the automatic runtime (`jsx: "react-jsx"`), so the element becomes a `TS2339` unknown-property error in every consuming `.tsx`. Re-target the augmentation at the `react` module:
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import type {} from 'react';
|
|
56
|
+
|
|
57
|
+
declare module 'react' {
|
|
58
|
+
namespace JSX {
|
|
59
|
+
interface IntrinsicElements {
|
|
60
|
+
'my-element': ...;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
The `import type {} from 'react'` is required when the file (or its tsconfig `types`) does not otherwise pull in `react`; without `react` in the program the augmentation fails with `TS2664: Invalid module name in augmentation`. Keep any `eslint-disable` comment already on the `namespace` line.
|
|
39
67
|
|
|
40
68
|
## Validate
|
|
41
69
|
|
|
70
|
+
Run build and typecheck across the affected projects, then lint and test:
|
|
71
|
+
|
|
42
72
|
```bash
|
|
43
73
|
nx run PROJECT:build
|
|
44
|
-
nx affected -t build,lint,test
|
|
74
|
+
nx affected -t build,typecheck,lint,test
|
|
45
75
|
```
|
|
46
76
|
|
|
77
|
+
Most React 19 breakages are type-level (the `JSX` namespace move, implicit `children`, ref types) and surface only at `typecheck`, not at `build` or `test`. A type change in a shared library often errors only in its consumers, so re-run until every project that depends on what you changed is green, not just the project you edited.
|
|
78
|
+
|
|
47
79
|
## Notes for LLM
|
|
48
80
|
|
|
49
81
|
- Codemods first (API + types), then manual.
|
|
50
|
-
- One project at a time
|
|
82
|
+
- One project at a time; typecheck and build after each.
|
|
83
|
+
- A custom element or JSX augmentation may live in a non-React library that React code pulls in through a bare side-effect import (`import '@scope/ui';`). Fix it there; `typecheck` on the consumers points you to it.
|
|
51
84
|
- Confirm third-party libs support React 19 before bumping.
|
|
85
|
+
|
|
86
|
+
## References
|
|
87
|
+
|
|
88
|
+
- React 19 upgrade guide (the TypeScript section covers the `JSX`, `useRef`, and `ref` changes): https://react.dev/blog/2024/04/25/react-19-upgrade-guide
|
|
89
|
+
- `types-react-codemod` (what each codemod does, including `scoped-jsx`): https://github.com/eps1lon/types-react-codemod
|
|
@@ -32,7 +32,7 @@ async function configureCypressCT(tree, options) {
|
|
|
32
32
|
throw new Error(`Cypress Component Testing is not currently supported for this project. Either 'executer' is not defined in '${target} target' of '${project} project.json' or executer present is not valid one. Valid ones are ${JSON.stringify([...options.validExecutorNames])}. Please check https://github.com/nrwl/nx/issues/21546 for more information.`);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
const { addDefaultCTConfig, getProjectCypressConfigPath, } = require('@nx/cypress/internal');
|
|
35
|
+
const { addDefaultCTConfig, getProjectCypressConfigPath, getInstalledCypressMajorVersion, } = require('@nx/cypress/internal');
|
|
36
36
|
const ctConfigOptions = {
|
|
37
37
|
bundler: options.bundler ?? (await getActualBundler(tree, options, found)),
|
|
38
38
|
};
|
|
@@ -49,7 +49,7 @@ async function configureCypressCT(tree, options) {
|
|
|
49
49
|
ctConfigOptions.buildTarget = found.target;
|
|
50
50
|
}
|
|
51
51
|
const cypressConfigFilePath = getProjectCypressConfigPath(tree, projectConfig.root);
|
|
52
|
-
const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions, '@nx/react/plugins/component-testing');
|
|
52
|
+
const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions, '@nx/react/plugins/component-testing', getInstalledCypressMajorVersion(tree));
|
|
53
53
|
tree.write(cypressConfigFilePath, updatedCyConfig);
|
|
54
54
|
return found;
|
|
55
55
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nx/react",
|
|
3
|
-
"version": "23.1.0-beta.
|
|
3
|
+
"version": "23.1.0-beta.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
|
|
6
6
|
"repository": {
|
|
@@ -108,25 +108,25 @@
|
|
|
108
108
|
"express": "^4.21.2",
|
|
109
109
|
"http-proxy-middleware": "^3.0.5",
|
|
110
110
|
"semver": "^7.6.3",
|
|
111
|
-
"@nx/devkit": "23.1.0-beta.
|
|
112
|
-
"@nx/js": "23.1.0-beta.
|
|
113
|
-
"@nx/eslint": "23.1.0-beta.
|
|
114
|
-
"@nx/web": "23.1.0-beta.
|
|
115
|
-
"@nx/module-federation": "23.1.0-beta.
|
|
116
|
-
"@nx/rollup": "23.1.0-beta.
|
|
111
|
+
"@nx/devkit": "23.1.0-beta.6",
|
|
112
|
+
"@nx/js": "23.1.0-beta.6",
|
|
113
|
+
"@nx/eslint": "23.1.0-beta.6",
|
|
114
|
+
"@nx/web": "23.1.0-beta.6",
|
|
115
|
+
"@nx/module-federation": "23.1.0-beta.6",
|
|
116
|
+
"@nx/rollup": "23.1.0-beta.6"
|
|
117
117
|
},
|
|
118
118
|
"devDependencies": {
|
|
119
|
-
"@nx/cypress": "23.1.0-beta.
|
|
120
|
-
"@nx/playwright": "23.1.0-beta.
|
|
121
|
-
"@nx/rsbuild": "23.1.0-beta.
|
|
122
|
-
"@nx/vite": "23.1.0-beta.
|
|
123
|
-
"@nx/vitest": "23.1.0-beta.
|
|
124
|
-
"@nx/webpack": "23.1.0-beta.
|
|
125
|
-
"@nx/storybook": "23.1.0-beta.
|
|
126
|
-
"nx": "23.1.0-beta.
|
|
119
|
+
"@nx/cypress": "23.1.0-beta.6",
|
|
120
|
+
"@nx/playwright": "23.1.0-beta.6",
|
|
121
|
+
"@nx/rsbuild": "23.1.0-beta.6",
|
|
122
|
+
"@nx/vite": "23.1.0-beta.6",
|
|
123
|
+
"@nx/vitest": "23.1.0-beta.6",
|
|
124
|
+
"@nx/webpack": "23.1.0-beta.6",
|
|
125
|
+
"@nx/storybook": "23.1.0-beta.6",
|
|
126
|
+
"nx": "23.1.0-beta.6"
|
|
127
127
|
},
|
|
128
128
|
"optionalDependencies": {
|
|
129
|
-
"@nx/vite": "23.1.0-beta.
|
|
129
|
+
"@nx/vite": "23.1.0-beta.6"
|
|
130
130
|
},
|
|
131
131
|
"publishConfig": {
|
|
132
132
|
"access": "public"
|