Webpack import returns undefined, depending on the order of imports

javascript webpack babeljs
Alec Mev picture Alec Mev · Feb 6, 2016 · Viewed 24.6k times · Source

I'm using webpack + babel. I have three modules looking like this:

// 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);

When main.js is executed, I see the following:

B undefined
A
main some-const

If I swap the imports in main.js, B becoming the first, I get:

A
B some-const
main some-const

How come B.js gets undefined instead of a module in the first version? What's wrong?

Answer

Alec Mev picture Alec Mev · Feb 6, 2016

After almost a full workday of narrowing down the issue (AKA hair-pulling), I've finally came to realize that I have a circular dependency.

Where it says // some other imports here, A imports another module C, which, in turn, imports B. A gets imported first in main.js, so B ends up being the last link in the "circle", and Webpack (or any CommonJS-like environment, for that matter, like Node) just short-circuits it by returning A's module.exports, which is still undefined. Eventually, it becomes equal to some-const, but the synchronous code in B ends up dealing with undefined instead.

Eliminating the circular dependency, by moving out the code that C depends on out of B, has resolved the issue. Wish Webpack would somehow warn me about this.

Edit: On the last note, as pointed out by @cookie, there's a plugin for circular dependency detection, if you'd like to avoid hitting this problem [again].

Related questions

Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
babel-loader jsx SyntaxError: Unexpected token

I'm a beginner in React + Webpack. I found a weird error in my hello world web app. I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax. Here are …

Read More
"You may need an appropriate loader to handle this file type" with Webpack and Babel

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' Here …

Read More