CODEWITHSUNDEEP
reactjsecmascript-6babeljsnpm-installnode-modules
Abhay Nikam
Abhay Nikam

Reputation: 182

Node modules issue: Only one default export allowed per module

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)

Upvotes: 10

Views: 16179

Answers (1)

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

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

Upvotes: 14

Related Questions