reactjs - CRA 应用程序在生产构建后不运行？

Question

我有一个使用 CRA 创建的 React 应用程序，它编译并运行良好。但是使用 yarn buld 制作并使用 serve -s build 提供的生产构建在控制台中显示以下错误:

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)

我启用了生成源 map 并调试了问题。它在初始化 redux reducer 时在这个 reducer 中崩溃:

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;

在这条线上

case Actions.SET_ROADMAP_TABLE_REF:

相关roadmap.actions.js(为清楚起见省略其他 Action ):

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
    };
}

...

同样，该项目无需构建即可成功运行。自上一个版本以来的主要变化是添加了 Typescript(尽管我只迁移了少数文件，并且 Action /reducer 没有受到影响)并切换到 Yarn 2。我尝试使用 npm 进行构建，但没有成功。

这是我的 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"
        ]
    }
}

请问有人能指出问题所在的方向吗？

Answer 1

经过长时间的试验，我终于用这个技巧成功了:

替换的导入语句来自

import * as Actions from 'app/store/actions';

到

import * as Actions from 'app/store/actions/roadmap.actions';

我想这个问题是 react-scripts 中的一个罕见错误，它试图在实际导入之前访问导入的常量