javascript - 收到错误 : `ReferenceError: Cannot access ' imported const' before initialization` in react

Question

• 节点 v:“10.14.1”
• react v:“^16.9.0”

通过运行 npm update 在本地更新了一些包后，我在启动我的 React 项目时开始收到此错误。

ReferenceError: Cannot access 'USER_LOGIN_PENDING' before initialization
Module.USER_LOGIN_PENDING
http://localhost:3300/static/js/main.chunk.js:28487:110
push../src/state/reducers/auth.js.__webpack_exports__.default
src/state/reducers/auth.js:23
  20 | 
  21 | export default (state = INITIAL_STATE, action) => {
  22 |   switch (action.type) {
> 23 |     case USER_LOGIN_PENDING:
  24 |       return { ...state, isLoading: true, showLoginError: false };
  25 |     case USER_LOGIN_SUCCESS:
  26 |       return {

还有更多堆栈帧，但这是最上面的一个。

在删除 node_modules 和 package-lock.json 后，我尝试恢复本地包并运行 npm install。运行没有错误。不知道为什么它突然开始给我这个错误。我的一个 friend 把 master 拉下来了，它在相同的版本上工作得很好。

这里是可能引发错误的 reducers 文件:

import {
  USER_LOGIN_PENDING,
  USER_LOGIN_SUCCESS,
  USER_LOGIN_FAIL,
  NOT_LOGGED_IN,
  USER_LOGOUT_PENDING,
  USER_LOGOUT_SUCCESS
} from '../actions/auth';


export const INITIAL_STATE = {
  isLoading: false,
  isLoggedIn: false,
  showLoginError: false,
  loginError: null,
  access_token: null,
  refresh_token: null,
  expires_at: null
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case USER_LOGIN_PENDING:
      return { ...state, isLoading: true, showLoginError: false };
    case USER_LOGIN_SUCCESS:
      return {
        ...state,
        isLoading: false,
        showLoginError: false,
        isLoggedIn: true,
        access_token: action.data.access_token,
        expires_at: action.data.expires_at,
        refresh_token: action.data.refresh_token
      };
    case USER_LOGIN_FAIL:
      return {
        ...state, isLoading: false, showLoginError: true, loginError: action.payload
      };
    case NOT_LOGGED_IN:
      return { ...state, isLoading: false, isLoggedIn: false };
    case USER_LOGOUT_PENDING:
      return { ...state, isLoading: true };
    case USER_LOGOUT_SUCCESS:
      return {
        ...state,
        isLoading: false,
        isLoggedIn: false,
        access_token: null,
        expires_at: null,
        refresh_token: null
      };
    default:
      return state;
  }
};

这里是 actions/auth 以防万一。

import userModel from '../../models/user';

export const USER_LOGIN_PENDING = "USER_LOGIN_PENDING";
export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
export const USER_LOGIN_FAIL = "USER_LOGIN_FAIL";
export const NOT_LOGGED_IN = "NOT_LOGGED_IN";
export const USER_LOGOUT_PENDING = "USER_LOGOUT_PENDING";
export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";

export const checkLoggedIn = () => dispatch => {
  dispatch({ type: USER_LOGIN_PENDING });
  const access = JSON.parse(localStorage.getItem('access_token'));
  const refresh = JSON.parse(localStorage.getItem('refresh_token'));
  const exp = JSON.parse(localStorage.getItem('expires_at'));
  if (access && refresh && exp) {
    if (JSON.parse(exp) > new Date().getTime()) {
      dispatch({ type: USER_LOGIN_SUCCESS, data: { access_token: access, refresh_token: refresh, expires_at: exp } });
      return Promise.resolve(access);
    }
    dispatch({ type: NOT_LOGGED_IN });
    return Promise.reject({ statusCode: 401 });
  }
  dispatch({ type: NOT_LOGGED_IN });
  return Promise.reject({ statusCode: 401 });
};

export const login = body => async dispatch => {
  const { email, password } = body;
  try {
    dispatch({ type: USER_LOGIN_PENDING });
    const data = await userModel.login(email, password);
    const {
      access_token, refresh_token, expires_at, user
    } = data;
    localStorage.setItem('access_token', JSON.stringify(access_token));
    localStorage.setItem('refresh_token', JSON.stringify(refresh_token));
    localStorage.setItem('expires_at', JSON.stringify(expires_at));
    dispatch({ type: USER_LOGIN_SUCCESS, data: { access_token, refresh_token, expires_at } });
    return Promise.resolve(user);
  } catch (err) {
    dispatch({ type: USER_LOGIN_FAIL, payload: err });
    return Promise.reject(err);
  }
};

export const logout = () => dispatch => {
  dispatch({ type: USER_LOGOUT_PENDING });
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  localStorage.removeItem('expires_at');
  dispatch({ type: USER_LOGOUT_SUCCESS });
};

此外，我的 package.json 以防万一。

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "10.14.1"
  },
  "dependencies": {
    "date-and-time": "^0.10.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "jest-junit": "^10.0.0",
    "lodash": "^4.17.15",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-beautiful-dnd": "^11.0.5",
    "react-datepicker": "^2.9.6",
    "react-dom": "^16.9.0",
    "react-dropzone": "^10.2.2",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.0",
    "react-scripts": "^3.1.2",
    "react-toastify": "^5.4.0",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "semantic-ui-react": "^0.88.1"
  },
  "devDependencies": {
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "jenkins-test": "CI=true react-scripts test --coverage --watchAll=false --coverageDirectory=coverage/cobertura  --reporters=jest-junit --reporters=default",
    "postbuild": "rm -rf ../build && mv build ../",
    "lint": "eslint ./"
  },
  "jest": {
    "coverageReporters": [
      "text",
      "cobertura"
    ]
  },
  "jest-junit": {
    "outputDirectory": "./coverage",
    "outputName": "report-jest.xml",
    "suiteName": "Client jest tests",
    "classNameTemplate": "Client jest tests.{classname}-{title}",
    "titleTemplate": "Client jest tests.{classname}-{title}",
    "ancestorSeparator": " > "
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8082/"
}

帮助将不胜感激。

Answer 1

这个问题已经有 7 年历史了，但当我遇到同样的问题时，我还是会发布一个答案，即使它可能不再对你有帮助。

在我们的例子中，这个错误是由循环导入引起的(模块 A 导入模块 B，模块 B 导入模块 C，模块 C 导入模块 A)。这一直有效到某一点，但在升级依赖项后中断。