@teambit/react 1.0.951 → 1.0.953

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "1.0.951",
+  "version": "1.0.953",
   "homepage": "https://bit.cloud/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "1.0.951"
+    "version": "1.0.953"
   },
   "dependencies": {
     "eslint": "8.56.0",
@@ -17,7 +17,6 @@
     "graphql-tag": "2.12.1",
     "lodash.flatten": "4.4.0",
     "chalk": "4.1.2",
-    "lodash.compact": "3.0.1",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-preset-env": "7.8.2",
     "postcss-normalize": "10.0.0",
@@ -26,6 +25,7 @@
     "webpack": "5.97.1",
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
     "@mdx-js/loader": "^3.1.1",
     "@svgr/webpack": "8.1.0",
     "babel-loader": "9.2.1",
@@ -41,10 +41,11 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "react-refresh": "0.10.0",
     "source-map-loader": "3.0.0",
-    "express": "4.21.2",
-    "url-join": "4.0.1",
+    "lodash.compact": "3.0.1",
     "react-error-overlay": "6.0.9",
     "strip-ansi": "6.0.0",
+    "express": "4.21.2",
+    "url-join": "4.0.1",
     "@babel/runtime": "7.23.2",
     "less": "^4.1.1",
     "sass": "1.63.6",
@@ -88,41 +89,41 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.7",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/api-reference.renderers.react": "0.0.69",
+    "@teambit/react.eslint-config-bit-react": "2.0.10",
     "@teambit/dependencies.modules.packages-excluder": "1.0.8",
     "@teambit/react.jest.react-jest": "1.0.38",
-    "@teambit/react.eslint-config-bit-react": "2.0.10",
-    "@teambit/bit-error": "0.0.404",
-    "@teambit/toolbox.network.get-port": "1.0.20",
     "@teambit/mdx.modules.mdx-v3-options": "0.0.2",
     "@teambit/react.babel.bit-react-transformer": "1.0.47",
     "@teambit/webpack.modules.generate-style-loaders": "1.0.25",
     "@teambit/webpack.modules.style-regexps": "1.0.20",
     "@teambit/component-id": "1.2.4",
+    "@teambit/bit-error": "0.0.404",
+    "@teambit/toolbox.network.get-port": "1.0.20",
     "@teambit/react.rendering.ssr": "1.0.3",
     "@teambit/ui-foundation.ui.pages.static-error": "0.0.110",
-    "@teambit/typescript": "1.0.951",
-    "@teambit/builder": "1.0.951",
-    "@teambit/bundler": "1.0.951",
-    "@teambit/compiler": "1.0.951",
-    "@teambit/component": "1.0.951",
-    "@teambit/dependency-resolver": "1.0.951",
-    "@teambit/dev-files": "1.0.951",
-    "@teambit/envs": "1.0.951",
-    "@teambit/formatter": "1.0.951",
-    "@teambit/linter": "1.0.951",
-    "@teambit/pkg": "1.0.951",
-    "@teambit/preview": "1.0.951",
-    "@teambit/schema": "1.0.951",
-    "@teambit/tester": "1.0.951",
-    "@teambit/webpack": "1.0.951",
-    "@teambit/workspace-config-files": "1.0.951",
-    "@teambit/workspace": "1.0.951",
-    "@teambit/application": "1.0.951",
-    "@teambit/generator": "1.0.952",
-    "@teambit/graphql": "1.0.951",
-    "@teambit/api-reference": "1.0.951",
-    "@teambit/compositions": "1.0.951",
-    "@teambit/ui": "1.0.951"
+    "@teambit/typescript": "1.0.953",
+    "@teambit/builder": "1.0.953",
+    "@teambit/bundler": "1.0.953",
+    "@teambit/compiler": "1.0.953",
+    "@teambit/component": "1.0.953",
+    "@teambit/dependency-resolver": "1.0.953",
+    "@teambit/dev-files": "1.0.953",
+    "@teambit/envs": "1.0.953",
+    "@teambit/formatter": "1.0.953",
+    "@teambit/linter": "1.0.953",
+    "@teambit/pkg": "1.0.953",
+    "@teambit/preview": "1.0.953",
+    "@teambit/schema": "1.0.953",
+    "@teambit/tester": "1.0.953",
+    "@teambit/webpack": "1.0.953",
+    "@teambit/workspace-config-files": "1.0.953",
+    "@teambit/workspace": "1.0.953",
+    "@teambit/application": "1.0.953",
+    "@teambit/generator": "1.0.954",
+    "@teambit/graphql": "1.0.953",
+    "@teambit/api-reference": "1.0.953",
+    "@teambit/compositions": "1.0.953",
+    "@teambit/ui": "1.0.953"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -131,12 +132,12 @@
     "@types/jest": "^26.0.0",
     "@types/lodash": "4.14.165",
     "@types/lodash.flatten": "4.4.6",
-    "@types/lodash.compact": "3.0.6",
     "@types/postcss-normalize": "9.0.1",
     "@types/webpack": "5.28.5",
     "@types/mini-css-extract-plugin": "2.2.0",
     "@types/react-dev-utils": "9.0.15",
     "@types/react-dom": "^17.0.5",
+    "@types/lodash.compact": "3.0.6",
     "@types/express": "4.17.21",
     "@types/url-join": "4.0.0",
     "@types/node": "12.20.4",

package/webpack/overlay/refreshOverlayInterop.js

@@ -11,9 +11,31 @@
 // @remove-on-eject-end
 'use strict';
 
-const { dismissRuntimeErrors, reportRuntimeError } = require('react-error-overlay');
+const {
+  dismissBuildError,
+  dismissRuntimeErrors,
+  reportBuildError,
+  reportRuntimeError,
+  setEditorHandler,
+} = require('react-error-overlay');
+const launchEditorEndpoint = require('./launchEditorEndpoint');
+
+setEditorHandler(function editorHandler(errorLocation) {
+  // Keep this in sync with the error overlay middleware endpoint.
+  fetch(
+    launchEditorEndpoint +
+      '?fileName=' +
+      window.encodeURIComponent(errorLocation.fileName) +
+      '&lineNumber=' +
+      window.encodeURIComponent(errorLocation.lineNumber || 1) +
+      '&colNumber=' +
+      window.encodeURIComponent(errorLocation.colNumber || 1)
+  );
+});
 
 module.exports = {
+  clearCompileError: dismissBuildError,
   clearRuntimeErrors: dismissRuntimeErrors,
+  showCompileError: reportBuildError,
   handleRuntimeError: reportRuntimeError,
 };

package/webpack/webpack.config.base.ts

@@ -71,6 +71,11 @@ export default function (isEnvProduction = false): Configuration {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: moduleFileExtensions.map((ext) => `.${ext}`),
+      extensionAlias: {
+        '.js': ['.ts', '.tsx', '.js', '.jsx'],
+        '.mjs': ['.mts', '.mjs'],
+        '.cjs': ['.cts', '.cjs'],
+      },
 
       alias: {
         'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
@@ -134,7 +139,11 @@ export default function (isEnvProduction = false): Configuration {
               options: {
                 babelrc: false,
                 configFile: false,
-                presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  require.resolve('@babel/preset-typescript'),
+                  require.resolve('@babel/preset-react'),
+                ],
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
                 // directory for faster rebuilds.

package/webpack/webpack.config.component.dev.ts

@@ -89,8 +89,6 @@ export default function (workDir: string, envId: string): Configuration {
       new ReactRefreshWebpackPlugin({
         overlay: {
           sockPath: `_hmr/${envId}`,
-          // TODO - react-error-overlay not showing runtime errors - https://github.com/teambit/bit/issues/5452
-          entry: require.resolve('./overlay/webpackHotDevClient'),
           module: require.resolve('./overlay/refreshOverlayInterop'),
         },