My source code is working fine with React 18 and react-script 4.0.3. But when I upgrade my code to react-script 5.0.1 I start getting some weired errors which doesn't have any references in the files mentioned in logs. Below is an error stack trace.
Uncaught TypeError: Cannot read properties of undefined (reading 'ASSET_DASHBOARD_ACTION_TYPES')
at Module.ASSET_DASHBOARD_ACTION_TYPES (assets.saga.ts:11:1)
at Module.ASSET_DASHBOARD_ACTION_TYPES (DeviceMenu.tsx:9:1)
at registerExportsForReactRefresh (RefreshUtils.js:146:1)
at Object.executeRuntime (RefreshUtils.js:177:1)
at $ReactRefreshModuleRuntime$ (index.ts:5:1)
at ./src/features/device/assets/index.ts (index.ts:5:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/features/device/index.ts (useDeviceId.ts:10:1)
ASSET_DASHBOARD_ACTION_TYPES @ assets.saga.ts:11
ASSET_DASHBOARD_ACTION_TYPES @ DeviceMenu.tsx:9
registerExportsForReactRefresh @ RefreshUtils.js:146
executeRuntime @ RefreshUtils.js:177
$ReactRefreshModuleRuntime$ @ index.ts:5
./src/features/device/assets/index.ts @ index.ts:5
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/device/index.ts @ useDeviceId.ts:10
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/dynamic-dashboard/utils/useRawDatapoints.ts @ getPositionMeta.ts:34
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/cartesian-chart/settings/raw-data/RawDataCartesianChartEditor.tsx @ Options3dConfigs.tsx:15
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/cartesian-chart/settings/DataSpecificCartesianChartSettings.tsx @ CrosshairConfigs.tsx:16
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/area-chart/SLAreaChartEditor.tsx @ SLWidgetViewer.tsx:71
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/SLWidgetList.ts @ SLWidgetEditor.tsx:79
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/SLWidgetViewer.tsx @ SLWidgetList.ts:194
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/chart-viewer/index.ts @ useGaugeValueChart.ts:59
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/components/index.ts @ userProfile.styles.ts:40
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/framework/index.ts @ index.ts:145
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/device/assets/store/asset-widget/assetWidgets.saga.ts @ assetWidgets.reducer.ts:97
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/device/assets/store/asset-widget/index.ts @ assetWidgets.stateType.ts:4
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/device/assets/store/index.ts @ assets.saga.ts:11
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/features.reducer.ts @ feature.saga.ts:59
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/configureStore.ts @ SidebarMenuList.tsx:18
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/features/FeaturesLayout.tsx @ configureStore.ts:40
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/config/AppLayout.tsx @ index.ts:3
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.tsx @ yellowDot.svg:46
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.tsx @ index.ts:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
the file which is pointed in this log contains below code snippet.
/**
* Assets Saga
*/
import { all } from 'redux-saga/effects';
import { watchAssetDashbaordSaga } from './asset-dashboard';
import { watchAssetWidgetDataSaga } from './asset-widget';
export function* assetsSagas() {
yield all([watchAssetDashbaordSaga(), watchAssetWidgetDataSaga()]);
}
I'm curious to know what exactly is making this code work in react-script 4 and breaking exactly same code in react-script 5?