Search code examples
javascriptmoduleecmascript-6ecmascript-next

Destructure Spread off Import ES6

import {Component, ...actions} from '../MyModule';

Seems to be throwing a linting error. Is there a reason why you can't "spread" on an ES6 import statement?

Solution

  • ES6 import syntax is not destructuring, it's as simple as that. The syntax starts with {, but its format is entirely different, and the way that it is handled in the implementation is quite different. For instance, you can rename imports with

     import {Component as MyComponent} from './MyModule';

    which is clearly not an object literal.

    If you need an object that you can use to reference imports as properties, you could do

     import * as MyModule from '../MyModule';

    then use MyModule.<exportName>. If you objective is specifically to get an object that contains all of the export values, excluding Component then you could always do destructuring after, e.g.

     const {Component, ...actions} = MyModule;