Babel-loader: Import default + export destructured object doesn't work

[mqklin]

//Export.js
export default {
  key: "value"
}

//Import.js
import {key} from "./Export.js"
console.log(key) // undefined, but should "value"

What's wrong?

[loganfsmyth]

Your imports and exports need to match: http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default/33506169#33506169

[mqklin]

@loganfsmyth it means that I can't import key in one line?

[loganfsmyth]

If you export a default, you need to import a default. If you want to import a named export, you need to export a named export, e.g.

export var key = 'value';

[mqklin]

Thx, it's clear, but how can I destructure a default import?

//Export.js
export default {
  key: "value"
}

//Import.js
import ??? from "./Export.js" // something like {default: key} ?
console.log(key) // "value"

[loganfsmyth]

You can't. Import syntax is not destructuring, it is just a list of named imports to import. If you export an object as the default, you'd have to import it as the default, and then destructure it, e.g.

import data from './Export.js';
const {key} = data;

Or else do the destructuring in the module, e.g.

export const {key} = {
    key: 'value',
};

or but it's easier to just do

export const key = 'value';

[mqklin]

I got it, thank you very much!

[Mike1stver]

Hi dear @loganfsmyth I undertand the solution and implemented in my project. However, i have one doubt. I was dealing with this hours because i see in an example in internet in which they use the module,export in an js file, and when they import they use {} directly:

message.js:

module.exports = {
firstMessage : "Hola mundo desde un modulo",
delayedMessage : async () =>{
const message = await waitTime
console.log(message)
const element = document.createElement("p")
element.textContent = message
renderToDOM(element)
}
}

index.js;
import {firstMessage } from './message.js'

I test that and have no errors. Is it because they use module.export?

I also remember some examples in React in which peolple use something like this:

import React, {Component} from 'react'
class Media extends Component{}

I review the github of React to check how they implement and saw they use and object and export it directly:
https://github.com/facebook/react/blob/master/packages/react/src/React.js

const React = {
Children: {
map,
forEach,
count,
toArray,
only,
},

createRef,
Component,
PureComponent,

createContext,
forwardRef,

.....

export default React;

Is it also a customized behaviour of React as well as the case of module.export?

[Mike1stver]

@loganfsmyth Just clarify I am using webpack and babel in a non-React project. I am studying the functionalities to use modern JS in webpack and came across with this doubt.

[loganfsmyth]

@Mike1stver The core thing to understand is that import/export and require/module.exports are two different module formats (ESM for the former, and CommonJS for the latter). My comments above apply specifically to the case where both files are in ESM format.

When an ESM file is importing a module that CommonJS instead of ESM, the rules are much less defined. For Babel and Webpack-compiled code at the moment the behavior is that import { foo } from "<commonjs>.js" will read the property foo off of the module.exports object of <commonjs>.js. That isn't a proper specification anywhere though. For instance when Node supports import syntax itself without Babel, it is entirely possible that it will work differently.

[Mike1stver]

Ohh now i understand, thats why they use module.export and it works well
Oka I've got it. The especification is not clear in the point when we cross the ESM and CommonJS usage. I will use them independent of each other. My last question, in the React example i pointed out in my first comment, It works well for sure because that statement is used to create statefull components, however, it goes againts (or customize) the behaviour you mentioned, sure?