[1.0] webpack configuration problem leads to wrong inline data uri (css image can't be decoded)

[Ognian]

Hello,
when including a css file (leaflet.css) a marker image is not displayed (broken image).
Looking deeper on the image tag data uri, it is starting correctly
<img src="data:image/png;base64,iVBORw … = but after the = there is something more appended:
")marker-icon.png. If you manually remove this extra string everything is correct.
Looking further at the webpack url loader, there is a similar issue webpack-contrib/url-loader#24 where it is suggested that something like this could happen when the url-loader is somehow running twice...
Any ideas on this? Do you have an idea how or who is generating the extra string, or how to debug/ dump the webpack config before webpack runs...
thanks a lot
Ognian

[KyleAMathews]

Did you try webpack-contrib/url-loader#24 (comment)?

It'd be really good to have a way to tell Gatsby to spit out the webpack config.

In the meantime — if you edit node_modules/gatsby/dist/utils/develop.js and find this line return webpackConfig(program, directory, develop, program.port);, add just before it console.log(webpackConfig(program, directory, develop, program.port).resolve());

[Ognian]

Hmm,
I tried, but actually I can't do this since I'm importing an css file, and inside the css the url is referenced.
By playing around with the url I found that the css or postcss loaders are parsing this:
ERROR in ./~/css-loader!./~/postcss-loader!./~/leaflet/dist/leaflet.css
what makes the things even more mysterious ...

Found a very pragmatic "solution":
instead of using the Markers (which refers to this png) im using CircleMarker (which is a vector one), so no png no uri no problem :-) (But this will bite me later, I'm pretty sure...)