test(integrations): switch react-scripts to webpack (#8329)

* chore: switch CRA 4 to webpack 4 * pnpm dedupe * test(integrations): switch CRA 5 to webpack 5 * Better dep vs devDep separation * Fix lockfile
TanStack · Nov 24, 2024 · b846c53 · b846c53
1 parent 2588a08
commit b846c53
Show file tree

Hide file tree

Showing 23 changed files with 2,086 additions and 7,435 deletions.
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -24,7 +24,6 @@
     "node",
     "react",
     "react-dom",
-    "react-scripts",
     "tsup",
     "typescript",
     "typescript47",

diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs
diff --git a/integrations/react-cra4/.eslintrc.cjs b/integrations/react-cra4/.eslintrc.cjs
diff --git a/integrations/react-cra4/.gitignore b/integrations/react-cra4/.gitignore
diff --git a/integrations/react-cra4/package.json b/integrations/react-cra4/package.json
diff --git a/integrations/react-cra4/src/react-app-env.d.ts b/integrations/react-cra4/src/react-app-env.d.ts
diff --git a/integrations/react-cra4/tsconfig.json b/integrations/react-cra4/tsconfig.json
diff --git a/integrations/react-cra5/.eslintrc.cjs b/integrations/react-cra5/.eslintrc.cjs
diff --git a/integrations/react-cra5/.gitignore b/integrations/react-cra5/.gitignore
diff --git a/integrations/react-cra5/package.json b/integrations/react-cra5/package.json
diff --git a/integrations/react-cra5/src/react-app-env.d.ts b/integrations/react-cra5/src/react-app-env.d.ts
diff --git a/integrations/react-cra5/tsconfig.json b/integrations/react-cra5/tsconfig.json
diff --git a/integrations/react-webpack-4/package.json b/integrations/react-webpack-4/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-webpack-4",
+  "private": true,
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --mode production"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "workspace:*",
+    "@tanstack/react-query-devtools": "workspace:*",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "babel-loader": "^8.3.0",
+    "cross-env": "^7.0.3",
+    "html-webpack-plugin": "^4.5.2",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^4.10.0"
+  }
+}
diff --git a/integrations/react-cra4/public/index.html → ...rations/react-webpack-4/public/index.html b/integrations/react-cra4/public/index.html → ...rations/react-webpack-4/public/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>React App</title>
+    <meta charset="UTF-8" />
+    <title>react-webpack-4</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/integrations/react-cra4/src/App.jsx → integrations/react-webpack-4/src/App.js b/integrations/react-cra4/src/App.jsx → integrations/react-webpack-4/src/App.js
diff --git a/integrations/react-cra4/src/index.jsx → integrations/react-webpack-4/src/index.js b/integrations/react-cra4/src/index.jsx → integrations/react-webpack-4/src/index.js
diff --git a/integrations/react-webpack-4/webpack.config.js b/integrations/react-webpack-4/webpack.config.js
@@ -0,0 +1,24 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: './public/index.html',
+  filename: './index.html',
+})
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(?:js|mjs|cjs|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [htmlPlugin],
+}
diff --git a/integrations/react-webpack-5/package.json b/integrations/react-webpack-5/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-webpack-5",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "workspace:*",
+    "@tanstack/react-query-devtools": "workspace:*",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "babel-loader": "^9.2.1",
+    "html-webpack-plugin": "^5.6.3",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
+  }
+}
diff --git a/integrations/react-cra5/public/index.html → ...rations/react-webpack-5/public/index.html b/integrations/react-cra5/public/index.html → ...rations/react-webpack-5/public/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>React App</title>
+    <meta charset="UTF-8" />
+    <title>react-webpack-5</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/integrations/react-cra5/src/App.jsx → integrations/react-webpack-5/src/App.js b/integrations/react-cra5/src/App.jsx → integrations/react-webpack-5/src/App.js
diff --git a/integrations/react-cra5/src/index.jsx → integrations/react-webpack-5/src/index.js b/integrations/react-cra5/src/index.jsx → integrations/react-webpack-5/src/index.js
diff --git a/integrations/react-webpack-5/webpack.config.js b/integrations/react-webpack-5/webpack.config.js
@@ -0,0 +1,24 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: './public/index.html',
+  filename: './index.html',
+})
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(?:js|mjs|cjs|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [htmlPlugin],
+}