javascript - 导入 es6 模块，一些命名导出未定义

Question

我正在 notification_actions.js 中编写代码，例如:

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

(参见 whole file)

然后将其捆绑到 all_actions.js 中，例如:

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

最后在 notifications_model.js 中使用它作为:

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

...

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

但是我得到 TypeError: notificationsReceived is undefined!

不确定如何进一步调试它。

我的 webpack.config.js:here

我的 package.json 部门:

"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

问题是循环依赖，特别是在脚本更高层使用 export default 和 import DependencyName from 'dependency'。

代替:

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

这个有效:

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

注意 action.js 中的 import { modalId as SomeModalId };