Webpack import devuelve undefined, dependiendo del orden de las importaciones

Question

Webpack import devuelve undefined, dependiendo del orden de las importaciones

Estoy usando webpack + babel. Tengo tres módulos que se ven así:

// A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

Cuando se ejecuta main.js, veo lo siguiente:

B undefined
A
main some-const

Si cambio las importaciones en main.js, B al convertirme en el primero, obtengo:

A
B some-const
main some-const

¿Cómo es que B.js obtiene undefined en lugar de un módulo en la primera versión? ¿Qué pasa?

44

javascript webpack babeljs

Author: loganfsmyth, 2016-02-06

Source

1 answers

score 111 · Accepted Answer

Después de casi una jornada laboral completa de reducir el problema (TAMBIÉN conocido como tirones de pelo), finalmente me he dado cuenta de que tengo una dependencia circular.

Donde dice // some other imports here, A importa otro módulo C, que, a su vez, importa B. A se importa primero en main.js, por lo que B termina siendo el último enlace en el "círculo", y Webpack (o cualquier entorno similar a CommonJS, para el caso, como Nodo) simplemente lo cortocircuita devolviendo A's module.exports, que sigue siendo undefined. Finalmente, se vuelve igual a some-const, pero el código síncrono en B termina tratando con undefined en su lugar.

La eliminación de la dependencia circular, al sacar el código del que depende C fuera de B, ha resuelto el problema. Ojalá Webpack me avisara de esto.

Edit: En la última nota, como señaló @cookie, hay un complemento para la detección de dependencias circulares, si desea evitar golpear este problema [de nuevo].