Quando si utilizza ES6, in che modo una funzione importata può essere indefinita in un file e non in un altro?

Question

Sto usando babel/ES6 con il webpack. Sto importando lo stesso file 'actions' - che esporta un mazzo di funzioni - in due posti diversi. A un certo punto si ritorna un modulo, l'altro undefined:

actions.js

export function test() { ... } 
export function test2() { ... } 

App.js

import actions from './actions' 
class App extends React.Component { ... } 
console.log(actions);   //<-------- Object{test:function,test2:function) 
export default connect((state) => { ... },actions)(App); 

modificare la ragione App.js lavorato era perché era in realtà usando import * as actions come suggerito sotto, l'ho appena riportato di nuovo sbagliato nell'esempio

NestedComponent.js

import actions from './actions' 
class NestedComponent extends OtherComponent { ... } 
console.log(actions);   //<-------- logs undefined 
export default connect((state) => { ... },actions)(NestedComponent); 

È correlato all'ordine in cui webpack definisce i moduli/file?

Answer 1

Questo non dovrebbe funzionare in entrambi i casi perché si stanno importando valori errati. import foo from '...' importa l'esportazione predefinita del modulo, ma non si dispone di un'esportazione predefinita, si hanno solo esportazioni con nome.

Che cosa si dovrebbe usare è

import {test, test2} from './actions'; 
// or 
import * as actions from './actions'; 

Answer 2

Un altro caso comune in cui questo accade è che se si sta testando con Jest e il comportamento auto-beffardo è abilitata. Molto dolore, come questo.

Answer 3

Mi sono imbattuto in un problema simile, causato da dipendenze circolari. Ho cercato di importare una costante nel file 'A' dal file 'B' che a sua volta ha cercato di importare dal file 'A'.