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

如何解决CRA 应用程序在生产构建后不运行？

我有一个用 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)

我启用了生成源映射并调试了问题。初始化 redux 减速器时它在这个减速器中崩溃：

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（为清楚起见省略了其他操作）：

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（尽管我只迁移了少数文件并且操作/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"
        ]
    }
}

有人能指出寻找问题的方向吗？

解决方法

经过长时间的试验，我终于用这个技巧让它工作了：

替换了导入语句

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

到

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

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