Getting an error: `ReferenceError: Cannot access 'imported const' before initialization` in react

Question

• Node v: "10.14.1"
• React v: "^16.9.0"

After updating some packages locally by running npm update, I started getting this error when I start my react project.

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 {

There is more stack frames but this is the top one.

I've tried reverting the local packages and running npm install after deleting node_modules and package-lock.json. That runs with no errors. No idea why it suddenly started giving me this error. A friend of mine has the master pulled down, and it works perfectly with the same versions.

Here is the reducers files where the error supposedly throws:

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

Here is actions/auth just in case.

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

Also, my package.json just in case.

{
  "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/"
}

Help would be greatly appreciated.

Answer 1

The question is 7 years old but as I ran into the same issue I'll post an answer anyways, even if it might not help you anymore.

In our case this error was caused by a cyclic import (module A imports module B which imports module C which imports module A). This worked until a certain point but then broke after upgrading dependencies.

Answer 2

Found out what the problem was. Turns out things have been broken for a while (since last time I updated my packages a bit ago), and they only resurfaced after I deleted my node_modules and package-lock.json and reinstalled everything.

The culprit in my case was 'react-scripts'. After downgrading it to version "2.1.5" everything worked again.