I have a React app created with CRA, it compiles and runs fine. But production build made with yarn buld and served with serve -s build shows following error in console:
Uncaught TypeError: Cannot read property 'a' of undefined
at Object.M (main.a6de4952.chunk.js:1)
at w (main.a6de4952.chunk.js:1)
at 7.f8bc878d.chunk.js:2
at Array.forEach (<anonymous>)
at 7.f8bc878d.chunk.js:2
at c (7.f8bc878d.chunk.js:2)
at Object.370 (main.a6de4952.chunk.js:1)
at f ((index):1)
at Object.152 (main.a6de4952.chunk.js:1)
at f ((index):1)
I enabled generating source maps and debugged the problem. It crashes in this reducer when initializing redux reducers:
import * as Actions from '../actions';
const initialState = {
tableRef: undefined,
};
const roadmapReducer = function(state = initialState, action) {
switch ( action.type ) {
case Actions.SET_ROADMAP_TABLE_REF:
{
return {
...state,
tableRef: action.tableRef,
};
}
default:
{
return state;
}
}
};
export default roadmapReducer;
on this line
case Actions.SET_ROADMAP_TABLE_REF:
Relevant roadmap.actions.js (other actions are omitted for clarity):
import axios from 'axios-instance';
import * as Actions from 'app/store/actions';
export const SET_ROADMAP_TABLE_REF = '[ROADMAP APP] SET ROADMAP TABLE REF';
export const SET_ROADMAP_BADGE = '[ROADMAP APP] SET ROADMAP BADGE';
export const REFRESH_ROADMAP_TABLE = '[ROADMAP APP] REFRESH ROADMAP TABLE';
export const VOTE_FEATURE = '[ROADMAP APP] VOTE FEATURE';
export function setRoadmapTableRef(tableRef) {
return {
type: SET_ROADMAP_TABLE_REF,
tableRef
};
}
...
Again, the project runs successfully without building. Major changes since the last release are adding Typescript (though I migrated only a handful of files and actions/reducers are untouched) and switching to Yarn 2. I tried to build with npm without any success.
Here's my package.json:
{
"name": "web",
"version": "1.1.4",
"private": true,
"dependencies": {
"@babel/core": "7.12.10",
"@babel/node": "7.12.10",
"@babel/preset-env": "7.11.0",
"@date-io/core": "^1.3.13",
"@date-io/date-fns": "^1.3.13",
"@material-ui/core": "4.11.0",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@types/react": "^17.0.0",
"@types/react-redux": "7.1.12",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.0",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"cross-env": "^7.0.3",
"cross-fetch": "^3.0.6",
"d3": "^6.3.1",
"d3-svg-legend": "^2.25.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.0",
"downshift": "^4.1.0",
"fast-deep-equal": "^2.0.1",
"filefy": "^0.1.10",
"firebase": "^7.11.0",
"formsy-react": "^2.2.1",
"github-markdown-css": "^4.0.0",
"history": "^4.10.1",
"i18next": "^19.8.4",
"isomorphic-fetch": "^2.2.1",
"jspdf": "^2.2.0",
"jspdf-autotable": "^3.5.13",
"jss": "^10.5.0",
"jss-plugin-extend": "^10.5.0",
"jss-rtl": "^0.3.0",
"keycode": "^2.2.0",
"localforage": "^1.9.0",
"lodash": "^4.17.20",
"material-ui-popup-state": "^1.7.1",
"mobile-detect": "^1.4.4",
"notistack": "^0.9.9",
"numeral": "^2.0.6",
"path-to-regexp": "^3.2.0",
"perfect-scrollbar": "^1.5.0",
"prismjs": "^1.22.0",
"promise": "^8.1.0",
"prop-types": "^15.7.2",
"purgecss": "^1.4.2",
"qs": "^6.9.4",
"raw-loader": "^4.0.2",
"react": "^16.13.0",
"react-app-polyfill": "^1.0.6",
"react-autosuggest": "^9.4.3",
"react-beautiful-dnd": "^13.0.0",
"react-confirm-alert": "^2.6.2",
"react-cookie-consent": "^5.1.2",
"react-dom": "^16.13.0",
"react-double-scrollbar": "^0.0.15",
"react-draggable": "^4.4.3",
"react-frame-component": "^4.1.3",
"react-i18next": "^11.8.4",
"react-markdown": "^4.3.1",
"react-masonry-css": "^1.0.14",
"react-number-format": "^4.4.1",
"react-popper": "^1.3.7",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-config": "^5.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"react-select": "^3.1.1",
"react-social-login-buttons": "^3.1.0",
"react-spring": "^8.0.27",
"react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^0.14.0-alpha.0",
"react-text-loop": "^2.3.0",
"react-text-mask": "^5.4.3",
"react-virtualized": "^9.22.3",
"react-window": "^1.8.6",
"redux": "4.0.5",
"redux-thunk": "2.3.0",
"styled-components": "^5.2.1",
"tailwindcss": "^1.2.0",
"tailwindcss-dir": "^4.0.0",
"typeface-muli": "^1.1.13",
"typescript": "^4.1.3",
"velocity-animate": "^1.5.2",
"velocity-react": "^1.4.3"
},
"devDependencies": {
"@yarnpkg/pnpify": "^2.0.0-rc.18",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.10.0",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"js-beautify": "^1.13.0",
"prettier": "^1.19.1",
"source-map-explorer": "^2.3.1"
},
"scripts": {
"start": "yarn run tailwind && react-scripts start",
"build": "yarn run tailwind && yarn run purge-tailwind && cross-env GENERATE_SOURCEMAP=true react-scripts --max_old_space_size=1024 build",
"madge": "madge --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
"tailwind": "tailwind build ./src/styles/tailwind-config.css -c ./tailwind.config.js -o ./src/styles/tailwind.css",
"purge-tailwind": "node ./purge-tailwindcss.js",
"test": "react-scripts test --env=node",
"analyze": "yarn run tailwind && yarn run purge-tailwind && react-scripts build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
}
Could anybody even just point in the direction where to look for the problem, please?
After long hours of trial I finally made it work with this trick:
Replaced import statement from
import * as Actions from 'app/store/actions';
to
import * as Actions from 'app/store/actions/roadmap.actions';
I guess the problem is a rare bug in react-scripts that tries to access imported constant before it's actually imported