Node modules issue: Only one default export allowed per module

Question

This a issue we faced while doing an npm install on server which loaded new set of version for node_modules.

We have a module which looks like

export default class DemoComponent extend React.Component {
  render() {
    return(
      <h1>Hello</h1>
    );
  }
}

export default connect(
  mapStateToProps,
  { ... }
)(DemoComponent);

It used to work fine before we did npm install which loaded a new version of development dependencies.

ERROR LOG:

Only one default export allowed per module. at File.buildCodeFrameError (/home/workspace/node_modules/babel-core/lib/transformation/file/index.js:431:15) at NodePath.buildCodeFrameError (/home/workspace/node_modules/babel-traverse/lib/path/index.js:140:26) at PluginPass.exit (/home/workspace/node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js:253:29) at newFn (/home/workspace/node_modules/babel-traverse/lib/visitors.js:276:21) at NodePath._call (/home/workspace/node_modules/babel-traverse/lib/path/context.js:76:18) at NodePath.call (/home/workspace/node_modules/babel-traverse/lib/path/context.js:48:17) at NodePath.visit (/home/workspace/node_modules/babel-traverse/lib/path/context.js:117:8) at TraversalContext.visitQueue (/home/workspace/node_modules/babel-traverse/lib/context.js:150:16) at TraversalContext.visitSingle (/home/workspace/node_modules/babel-traverse/lib/context.js:108:19) at TraversalContext.visit (/home/workspace/node_modules/babel-traverse/lib/context.js:192:19) at Function.traverse.node (/home/workspace/node_modules/babel-traverse/lib/index.js:161:17)

Answer 1

You can not use more than one export default in a file. It doesn't make sense. If you need to export multiple things you need to use named export

DemoComponent.js

export class DemoComponent extends React.Component {
  render() {
    return(
      <h1>Hello</h1>
    );
  }
}

export default connect(
  mapStateToProps,
  { ... }
)(DemoComponent);

So the import statement would look like this:

import ConnectedComponent, {DemoComponent} from './DemoComponent';

When you use export default you can name your variable as you want but with named export you have to use the same variable name as the one that you export.

More about export syntax

Btw you have a typo in your example. It's extends, not extend