Importing es6 module, some named exports are undefined

Question

I'm writing code in notification_actions.js like:

# notification_actions.js
export const NOTIFICATIONS_RECEIVED = 'NOTIFICATIONS_RECEIVED';
export const notificationsReceived = (notifications, unreadCount) => ({
  type: NOTIFICATIONS_RECEIVED,
  notifications,
  unreadCount,
});

(see the whole file)

Then bundling that into all_actions.js like:

# all_actions.js
export * from 'navigation_actions';
export * from 'filter_type_actions';
export * from 'notification_actions';

And finally using it in notifications_model.js as:

import {
  notificationsReceived,
} from './all_actions.js';

...

const handleData = (dispatch) => ({ notifications, unreadCount }) => {
  dispatch(notificationsReceived(notifications, unreadCount));
};

But I get TypeError: notificationsReceived is undefined!

Unsure how to debug this further.

My webpack.config.js: here

My package.json deps:

"autobind-decorator": "^1.3.3",
"autoprefixer": "^6.3.6",
"babel-cli": "^6.10.1",
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-plugin-export-default-module-exports": "^0.0.4",
"babel-plugin-lodash": "^3.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
"babel-polyfill": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"classnames": "^2.2.5",
"colorguard": "^1.2.0",
"composer": "^0.3.0",
"css-loader": "^0.23.1",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-import-resolver-webpack": "^0.3.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1",
"formsy-react": "^0.18.0",
"glob": "^7.0.3",
"image-webpack-loader": "^1.8.0",
"lodash": "^4.13.1",
"lodash-webpack-plugin": "^0.9.1",
"moment": "^2.13.0",
"node-sass": "^3.7.0",
"postcss": "^5.0.21",
"postcss-filter-stream": "0.0.6",
"postcss-loader": "^0.9.1",
"radium": "^0.17.1",
"react": "^15.1.0",
"react-bootstrap-sweetalert": "^1.1.11",
"react-click-outside": "^2.1.0",
"react-datepicker": "^0.27.0",
"react-dom": "^15.1.0",
"react-mixin": "^2.0.2",
"react-multidecorator": "^0.1.0",
"react-onclick-outside": "^0.1.0",
"react-redux": "^4.4.5",
"react-select": "^1.0.0-beta13",
"react-toggle-display": "^2.0.2",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"stylelint": "^6.5.1",
"underscore": "^1.8.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-plugin-manifest": "^1.0.1"

Answer 1

The issue was circular dependencies, specifically the use of export default and import DependencyName from 'dependency' higher up in the script.

Instead of:

// action.js
import SomeModal from './some_modal.js';
export const doAction = () => console.log(SomeModal.modalId);
export default module.exports;

// some_modal.js
import { doAction } from './action.js';
export const close = () => doAction();
export default module.exports;

This works:

// action.js
import { modalId as SomeModalId } from './some_modal.js';
export const doAction = () => console.log(SomeModalId);
export default module.exports;

// some_modal.js
import { doAction } from './action.js';
export const close = () => doAction();
export default module.exports;

Note the import { modalId as SomeModalId } in action.js;

Answer 2

since you bundling actions in all_actions.js

   # all_actions.js
    export * from './navigation_actions';
    export * from './filter_type_actions';
    export * from './notification_actions';

you should import from all_actions.js

import { notificationsReceived } from './your-path/all_actions';

or directly from notification_actions.js

import { notificationsReceived } from './your-path/notification_actions';

or

import * as actions from './your-path/all_actions';
///then
actions.notificationsReceived;
///or
const {notificationsReceived} = actions;