Loading bigpicture via Dynamic Import with Webpack about bigpicture

[henrygd]

No worries, you didn't waste my time. Now I know in case anyone else runs into the same thing. And trust me, I've spent my fair share of hours troubleshooting webpack / babel errors.

Good luck with your project!

[henrygd]

Just to clarify, your webpack build gives you a css file in your document head that does not visibly apply style to the page even though inspector shows individual elements have the style applied? And this is for all elements on your page, not just elements related to bigpicture? I feel like I must be misinterpreting.

And if you just use like below it's okay?

import BigPicture from "bigpicture";

const link = document.querySelector(".link");
link.addEventListener("click", e => {
  e.preventDefault();
  BigPicture({
    el: link,
    ytSrc: "8ktONdU_wXU"
  });
});

[joepagan]

Hey @henrygd thanks for getting back to me.

Sorry for wasting your time, I've just figured out what the issue was (me), this was nothing to do with bigpicture...

I realised that taking a closer look at my css files they actually included some javascript (meaning that the extract css plugin wasn't working correctly) which obviously resulted the styles not loading.

I apparently missed this really important announcement for webpack's extract-text-webpack-plugin (which probably wasn't there at the time I started looking at webpack4):

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

After setting up the newer plugin mini-css-extract-plugin my styles are loading correctly.

Really strange that I ended up getting quite far on a project without seeing a similar problem before & especially strange that your package seemed to trigger this issue for me.

Appreciate the follow up message & your contribution to the scene.