The documentation for imports-loader has a case for injecting a variable with a JS Object literal as follows:
import?config=>{size:50}
This works great, but once you try to add another property to this JS object in (what I considered to be) the obvious way:
import?config=>{size:50,color:2}
The imports-loader (indirectly via loaders-util) tokenizes on the comma and starts doing.. weird things (hard to describe, but it basically treats the {size:50 as a variable injection, and the color:2} as a require injection.
The solution is easy enough once you understand what is going on (or read through the source code), just replace the comma with the URI encoded version %2C. But you actually have to do this manually and can't depend on the encodeURIComponent function (something to do with require context? Not sure).
I'm guessing that this may throw a curve ball for people (like it did for me!) so it might be worthwhile to beef up the documentation to clarify this.
I'm still a bit new to webpack and all its modules and plug-ins, so I may be doing something wrong, so please do bear with me :)
@thegrandpoobah Could you provide an example please and elaborate on the loader-utilspart futher I need to triage if this is an eventual bug in loader-utils 😛
The documentation for imports-loader has a case for injecting a variable with a JS Object literal as follows:
This works great, but once you try to add another property to this JS object in (what I considered to be) the obvious way:
The imports-loader (indirectly via loaders-util) tokenizes on the comma and starts doing.. weird things (hard to describe, but it basically treats the
{size:50
as a variable injection, and thecolor:2}
as a require injection.The solution is easy enough once you understand what is going on (or read through the source code), just replace the comma with the URI encoded version
%2C
. But you actually have to do this manually and can't depend on theencodeURIComponent
function (something to do with requirecontext
? Not sure).I'm guessing that this may throw a curve ball for people (like it did for me!) so it might be worthwhile to beef up the documentation to clarify this.
I'm still a bit new to webpack and all its modules and plug-ins, so I may be doing something wrong, so please do bear with me :)