1

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?

2
  • It seems like webpack migrated from 4.x to 5.x within react-scripts is responsible for this error. However I am unable to trace the root cause and exact changes needs to be done for fixing the error Commented Nov 16, 2022 at 9:40
  • similar issues with react-scripts 5, look for help as well Commented Sep 11, 2023 at 20:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.