Imported objects and functions are undefined

[Aziaev]

Is this a bug report?

Not sure

Did you try recovering your dependencies?

I tried to delete node_modules, package-lock.json, npm install

npm version 6.9.0

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.9.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 66.0.3
    Safari: 12.1.1
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

package.json

{
  "name": "wileyplus-course-admin-ui",
  "version": "1.77.1",
  "private": true,
  "homepage": "/wpngadmin/",
  "proxy": "https://education-dev.wiley.com",
  "dependencies": {
    "@tinkoff/utils": "^2.0.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.6",
    "flow-bin": "^0.97.0",
    "history": "^4.7.2",
    "js-cookie": "^2.2.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.23",
    "react": "^16.8.6",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.8.6",
    "react-loader-spinner": "^2.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "^3.0.1",
    "react-select": "^2.1.2",
    "react-table": "^6.9.2",
    "reactstrap": "^6.1.0",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-form": "^7.4.2",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "styled-components": "^3.3.3",
    "superagent": "^3.8.3"
  },
  "devDependencies": {
    "enzyme": "^3.5.0",
    "enzyme-adapter-react-16": "^1.3.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-standard-react": "^7.0.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-jest": "^21.17.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^4.0.0",
    "flow-typed": "^2.5.1",
    "husky": "^1.3.1",
    "jest-styled-components": "^6.2.0",
    "redux-mock-store": "^1.5.3"
  },
  "scripts": {
    "lint": "eslint src --ignore-pattern node_modules/ || exit 1",
    "flow": "flow",
    "test": "react-scripts test --env=jsdom --coverage || exit 1",
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/index.js",
      "!<rootDir>/node_modules/",
      "!<rootDir>/path/to/dir/",
      "!src/registerServiceWorker.js",
      "!**/constants.js",
      "!**/constants/*",
      "!**/reducers/index.js",
      "!**/pages/index.js",
      "!**/*.types.js",
      "!**/routes/*",
      "!**/sagas/index.js",
      "!**/store/index.js",
      "!**/styled/*",
      "!**/styled.js",
      "!**/initialState.js",
      "!**/__test__/*"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 51,
        "branches": 44,
        "functions": 43,
        "lines": 53
      }
    },
    "coverageReporters": [
      "lcov",
      "clover",
      "cobertura"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test",
      "pre-push": "npm run lint && npm run test"
    }
  },
  "browserslist": []
}

Steps to Reproduce

I have issue with imports. My imported variable is a constant NOTIFICATIONS_SERVICE and it imported as undefined:

import { all, takeEvery, takeLatest } from 'redux-saga/effects';
import { createNotification, NOTIFICATIONS_SERVICE } from '../../components/Notifications/redux';

console.log(createNotification, NOTIFICATIONS_SERVICE); // ( f createNotification(action), undefined)
console.log(require('../../components/Notifications/redux')); // Module {…}

export default function * rootSaga() {
  yield all([
    /* Notifications service */
    takeEvery(NOTIFICATIONS_SERVICE.create, createNotification),
]);
}

exported from here:

// @flow
import path from '@tinkoff/utils/object/path';
import type { Effect } from 'redux-saga';
import { delay } from 'redux-saga';
import { call, put } from 'redux-saga/effects';
import { DEFAULT_ALERT_DELAY } from '../../constants';
import { getUuid } from '../../utils';
import type { CreateNotificationType, NotificationsInitialState } from './index.types';

/*
 * Notifications initial state
 */
const initialState: NotificationsInitialState = [];

/**
 * Notifications Action types
 */
export const NOTIFICATIONS_SERVICE = {
  create: 'NOTIFICATIONS_SERVICE_CREATE_ITEM',
  push: 'NOTIFICATIONS_SERVICE_ADD_ITEM',
  remove: 'NOTIFICATIONS_SERVICE_REMOVE_ITEM',
};

export type NotificationsServiceAction = {
  type: string,
  payload: {
    item: CreateNotificationType | { id: string }
  },
};

/**
 * Notifications action creators
 */
export const createRemoveNotificationAction = (id: string) => ({
  type: NOTIFICATIONS_SERVICE.remove,
  payload: { item: { id } },
});

export const createNotificationAction = (item: CreateNotificationType) => ({
  type: NOTIFICATIONS_SERVICE.create,
  payload: {
    item: {
      id: getUuid(),
      code: item.code,
      message: item.message,
      title: item.title,
      delay: item.delay || DEFAULT_ALERT_DELAY,
      type: item.type,
    },
  },
});

/**
 * Notifications reducer
 */
export const reducer = (state: NotificationsInitialState = initialState, action: NotificationsServiceAction) => {
  const { type } = action;
  const item = path(['payload', 'item'], action);
  const itemId = path(['payload', 'item', 'id'], action);

  console.log(NOTIFICATIONS_SERVICE)

  switch (type) {
    case NOTIFICATIONS_SERVICE.push:
      return [...state, item];
    case NOTIFICATIONS_SERVICE.remove:
      return [...state.filter(n => n.id !== itemId)];
    default:
      return state;
  }
};

/**
 * Notifications saga
 */
export function * createNotification(action: NotificationsServiceAction): Generator<Effect, void, any> {
  const { payload: { item } } = action;

  yield put({
    type: NOTIFICATIONS_SERVICE.push,
    payload: { item },
  });

  const alertDelay = item.delay || DEFAULT_ALERT_DELAY;

  yield call(delay, parseInt(alertDelay));

  yield put({
    type: NOTIFICATIONS_SERVICE.remove,
    payload: { item },
  });
}

also the reducer function is also exported as undefined

In reducer I'm trying to console object NOTIFICATION_SERVICE which is defined above, and then I get undefined in console. This issue causes other issues by chain. I can't even import it anywhere.

Expected Behavior

Should be defined and worked as expected

Should imported as is

Actual Behavior

Imported objects and functions are undefined

In reducer I'm trying to console object NOTIFICATION_SERVICE which is defined above, and then I get undefined in console. This issue causes other issues by chain. I can't even import it anywhere. Screen shot:

Stack trace in browser:

Part of bundle code:

/* Notifications service */
          Object(redux_saga_effects__WEBPACK_IMPORTED_MODULE_1__["takeEvery"])(_components_Notifications_redux__WEBPACK_IMPORTED_MODULE_2__["NOTIFICATIONS_SERVICE"].create, _components_Notifications_redux__WEBPACK_IMPORTED_MODULE_2__["createNotification"]),
          /

/* harmony import */ var _components_Notifications_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/Notifications/redux */ "./src/components/Notifications/redux.js");

(Write what happened. Please add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[bugzpodder]

Does it happen in development? Can you provide a minimal repro that shows this error?

[Aziaev]

@bugzpodder yes, it's happen on local dev. I found that there is a function which named getUserRestrictions and duplicate of this function with same name in other incorrect place. When I delete duplicate function, imports on third side files becoming undefined. Very strange.

[Aziaev]

@bugzpodder I found that it happen when I import store for getting state by getState

import store from './../core/store';

...
const getPerimissions = store.getState().app.permissions
...

And store looks like:

import { createBrowserHistory as createHistory } from 'history';
import { routerMiddleware } from 'react-router-redux';
import { applyMiddleware, compose, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas';

export const history = createHistory();
const sagaMiddleware = createSagaMiddleware();
const enhancers = [];
const middlewares = [
  sagaMiddleware,
  routerMiddleware(history),
];

window.__REDUX_DEVTOOLS_EXTENSION__ = window.__REDUX_DEVTOOLS_EXTENSION__ || {};

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middlewares),
  ...enhancers,
);

const store = createStore(
  rootReducer,
  composedEnhancers,
);

sagaMiddleware.run(rootSaga);

export default store;

I have no idea why.

[bugzpodder]

Please provide a minimal repro on github. If you aren't able to publicly, I still suggest you try to produce one anyway because you'll likely find the root cause along the way when you start deleting code.

[bugzpodder]

Also check for cyclic imports

[Aziaev]

Sorry, but I can't provide minimal repo. If I import 'store' from my ../store/index, it crushes by same reason. If I remove store from imports, it works without error. Thanks anyway

[bugzpodder]

Store runs sagas so it's expected that it would succeed after you remove store. Like I said, just creating a minimal repro for yourself might reveal the cause of this.

[Aziaev]

@bugzpodder that was cycled url. Sagas were taking urls from file which imports store, and store executes sagas.