@machtwatch/react-script 1.2.11-alpha.26 → 1.2.11-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.26",
+  "version": "1.2.11-alpha.27",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -54,7 +54,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "13.0.0",
     "assets-webpack-plugin": "7.1.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^26.3.0",
@@ -92,10 +92,13 @@
     "postcss-import": "^14.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^7.7.1",
+    "process": "0.11.10",
     "promise": "^8.0.2",
     "purgecss-webpack-plugin": "^4.1.3",
+    "react": "18.3.1",
     "react-dev-utils": "^12.0.1",
-    "react-error-overlay": "6.0.9",
+    "react-dom": "18.3.1",
+    "react-error-overlay": "6.0.11",
     "react-refresh": "0.18.0",
     "recluster": "^0.4.5",
     "regenerator-runtime": "^0.13.3",

package/scripts/lib/webpackHotDevClient.js

@@ -10,38 +10,38 @@ const {
   stopReportingRuntimeErrors,
 } = require('react-error-overlay');
 
-setEditorHandler(errorLocation => {
-  const fileName = encodeURIComponent(errorLocation.fileName);
-  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
+// setEditorHandler(errorLocation => {
+//   const fileName = encodeURIComponent(errorLocation.fileName);
+//   const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
+// 
+//   fetch(
+//     // Keep in sync with react-dev-utils/errorOverlayMiddleware
+//     `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
+//   );
+// });
 
-  fetch(
-    // Keep in sync with react-dev-utils/errorOverlayMiddleware
-    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
-  );
-});
-
-hotClient.useCustomOverlay({
-  showProblems(type, errors) {
-    const formatted = formatWebpackMessages({
-      errors,
-      warnings: [],
-    });
-
-    reportBuildError(formatted.errors[0]);
-  },
-  clear() {
-    dismissBuildError();
-  },
-});
+// hotClient.useCustomOverlay({
+//   showProblems(type, errors) {
+//     const formatted = formatWebpackMessages({
+//       errors,
+//       warnings: [],
+//     });
+// 
+//     reportBuildError(formatted.errors[0]);
+//   },
+//   clear() {
+//     dismissBuildError();
+//   },
+// });
 
 hotClient.setOptionsAndConnect({
   name: 'client',
   reload: true,
 });
 
-startReportingRuntimeErrors({
-  filename: '/assets/client.js',
-});
+// startReportingRuntimeErrors({
+//   filename: '/assets/client.js',
+// });
 
 if (module.hot) {
   module.hot.dispose(stopReportingRuntimeErrors);

package/scripts/webpack.config.js

@@ -168,9 +168,12 @@ const webpackConfig = ({ isClient }) => ({
       '@hooks': path.resolve(paths.appSrc, 'hooks'),
       '@components': path.resolve(paths.appSrc, 'components'),
       '@baseComponents': path.resolve(paths.appSrc, 'base_components'),
-      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
-      'react/jsx-runtime': 'react/jsx-runtime.js'
+      'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
+      'react/jsx-runtime.js': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime.js': require.resolve('react/jsx-dev-runtime'),
     },
+    conditionNames: ['import', 'require', 'node', 'default'],
   },
 
   resolveLoader: {
@@ -209,6 +212,9 @@ const webpackConfig = ({ isClient }) => ({
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto',
+        resolve: {
+          fullySpecified: false,
+        }
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -573,6 +579,9 @@ const clientConfig = {
       'process.env.BROWSER': true,
       __DEVTOOLS__: isVerbose  // <-------- DISABLE redux-devtools HERE
     }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+    }),
 
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output