Comment by Sai Kishore Komanduri on "Could anyone tell me the technical difference between these two syntaxes (one wrong) for dynamic imports in Javascript?"

The difference is subtle. According to ES6 grammar, the ModuleSpecifier ("./components/Home" in your example) has to be a StringLiteral at compile time. This is so its structure can be statically analyzed; for static checking, optimization, etc...

In other words, the "type" information of ModuleSpecifier cannot depend on runtime information; which is what is happening (and the reason it fails) in the second example where you are using only an IdentifierName (stringVar).

In the first example, variable might hold a different value at runtime, so is that not dependent on run-time information?

That's still a StringLiteral. The information required, is the "type" of the ModuleSpecifier. Traditional string concatenation with another variable should also work!

I've updated the answer to make this more clear. Thanks!

Sai Kishore Komanduri Thanks for answering! I understand it now. I spent superbly foolish time to dynamically import a react component usingreact-loadable , with the second syntax, read the library's whole code, only to realise that something was not wrong in the library code, but my syntax itself.

But I've one question: How did you extract this information out of the juggle that is the spec ? Or did you just know from before, what ModuleSpecifier and IdentifierName were in the spec? More generally how do you read the dreadful spec?

gdad-s-river Well, unless you are in the leagues of Kyle Simpson, Douglas Crockford (I'm not referring to their intellectual prowess, but to the fact that these guys are insanely, pedantically obsessed about the tiny details of the language :)... you do it the piecemeal way. Meaning, picking up on whatever you need whenever you need it.

For example, with your question we just search the spec for the word imports and with a little dig in, we happen at a section dedicated to it; where we can see all the different ways and forms of writing import statements, and the corresponding rules/grammar of the language, in Backus-Naur Form.

Also, blog articles like these (speaking in the context of your question) – 2ality.com/2014/09/es6-modules-final.html – help a lot!

Search Hashnode