chore: migrate repo to react 19 (#1027)

Author: Hotell

importer/package.json

@@ -38,7 +38,6 @@
     "glob": "^8.0.1",
     "lodash": "4.17.21",
     "mkdirp": "^1.0.4",
-    "react": "~17.0.1",
     "shx": "^0.3.2",
     "svgo": "2.8.2",
     "yargs": "^14.2.3"

package-lock.json

@@ -23,29 +23,33 @@
     "format:check": "nx format:check"
   },
   "devDependencies": {
+    "@griffel/webpack-extraction-plugin": "0.5.14",
+    "@griffel/webpack-loader": "2.2.23",
     "@nx/js": "21.6.10",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
+    "css-loader": "7.1.4",
     "eslint": "8.57.1",
     "husky": "9.1.7",
+    "jest-diff": "^30.2.0",
+    "jsdom": "^21.1.0",
+    "mini-css-extract-plugin": "2.10.1",
+    "monosize": "0.7.1",
+    "monosize-bundler-webpack": "0.2.1",
     "nano-staged": "0.9.0",
     "nx": "21.6.10",
     "patch-package": "8.0.1",
     "prettier": "3.6.2",
-    "@types/react": "^17.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-window": "^1.8.10",
     "storybook": "9.1.16",
     "typescript": "5.0.4",
     "typescript-eslint": "7.18.0",
-    "monosize": "0.7.1",
-    "monosize-bundler-webpack": "0.2.1",
-    "@griffel/webpack-loader": "2.2.23",
-    "@griffel/webpack-extraction-plugin": "0.5.14",
-    "mini-css-extract-plugin": "2.10.1",
-    "css-loader": "7.1.4",
-    "jest-diff": "^30.2.0",
-    "jsdom": "^21.1.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2"
   },
   "optionalDependencies": {
     "@esbuild/linux-x64": "0.25.12",

package.json

@@ -1,14 +1,12 @@
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'],
 
-  addons: [getAbsolutePath('@storybook/addon-docs'), getAbsolutePath('@storybook/addon-webpack5-compiler-swc')],
+  addons: ['@storybook/addon-docs', '@storybook/addon-webpack5-compiler-swc'],
 
   framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
+    name: '@storybook/react-webpack5',
     options: {},
   },
 
@@ -19,17 +17,6 @@ const config: StorybookConfig = {
   docs: {
     docsMode: true,
   },
-
-  webpackFinal: async (config) => {
-    const docsiteNodeModules = new URL('../node_modules', import.meta.url).pathname;
-    config.resolve = config.resolve || {};
-    config.resolve.modules = [docsiteNodeModules, ...(config.resolve.modules || ['node_modules'])];
-    return config;
-  },
 };
 
 export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}

packages/docsite/.storybook/main.ts

@@ -13,15 +13,6 @@ module.exports = {
   resolve: {
     // Add `.ts` and `.tsx` as a resolvable extension.
     extensions: ['.ts', '.tsx', '.js'],
-    alias: {
-      // Force React and React-DOM to use the versions installed in icon-app (React 19)
-      // This prevents version conflicts with react-icons package which uses React 17
-      react: path.resolve(__dirname, 'node_modules/react'),
-      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
-      // Ensure React/jsx-runtime uses the correct version
-      'react/jsx-runtime': path.resolve(__dirname, 'node_modules/react/jsx-runtime'),
-      'react/jsx-dev-runtime': path.resolve(__dirname, 'node_modules/react/jsx-dev-runtime'),
-    },
   },
   mode: 'development',
   module: {

packages/icon-app/webpack.config.js

@@ -40,17 +40,13 @@
     "@babel/core": "^7.16.0",
     "@griffel/babel-preset": "^1.8.1",
     "@griffel/eslint-plugin": "^2.0.2",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^12.1.2",
     "@types/react": "^17.0.2",
     "concurrently": "^9.2.0",
     "eslint": "8.57.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^7.2.0",
     "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
     "renamer": "^2.0.1",
     "svgo": "2.8.2",
     "typescript": "4.1.6",

packages/react-icons/package.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "jsx": "react",
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "include": ["src"],
   "exclude": [

packages/react-icons/tsconfig.json

@@ -24,7 +24,11 @@
     "sourceMap": true,
     "jsx": "react-native",
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "include": ["src"],
   "exclude": ["lib", "lib-cjs", "node_modules"]