[GeoWidget] - Leaflet CSS seems to have gone missing

[karel-rehor]

Build Built locally from Master branch. Last commit 23a61bb0e5476857ec4dbdaa811eab78398e42c2

Use Case I'm building a test suite for GeoWidget with Giraffe based in NextJS.
https://github.com/bonitoo-io/giraffe-cypress

I add GeoWidget elements to simple pages for testing.

Expected Behavior That the underlying leaflet tiles for open street maps will be composed sensibly.

Actual Behavior When I open the base case I see the GeoWidget tiles are scattered across the page. This is most likely caused by missing Leaflet CSS resources.

Screenshot

What it should look like From yesterday's tests

[karel-rehor]

Storybook

Double checked this with storybook in 23a61bb0e5476857ec4dbdaa811eab78398e42c2

In Dubsky's fork it looked like this

However now storybook fails to load...

...
ERROR in /home/karl/bonitoo/prjs/github.com/influxdata/giraffe/giraffe/src/components/geo/SVGIcon.ts
../giraffe/src/components/geo/SVGIcon.ts
[tsl] ERROR in /home/karl/bonitoo/prjs/github.com/influxdata/giraffe/giraffe/src/components/geo/SVGIcon.ts(3,15)
      TS2307: Cannot find module 'leaflet'.

ERROR in /home/karl/bonitoo/prjs/github.com/influxdata/giraffe/giraffe/src/components/geo/bing-maps/BingLayerObject.ts
../giraffe/src/components/geo/bing-maps/BingLayerObject.ts
[tsl] ERROR in /home/karl/bonitoo/prjs/github.com/influxdata/giraffe/giraffe/src/components/geo/bing-maps/BingLayerObject.ts(1,15)
      TS2307: Cannot find module 'leaflet'.

storybook.log.zip

[TCL735]

I am not seeing any errors locally when running storybook. Can you please double check?

[karel-rehor]

I double checked storybook after...

giraffe/giraffe$ yarn install
giraffe/giraffe$ yarn build

And it looks OK now.

However, when using the built module in my NextJS application, also after re-installing and re-building, I still can't find .leaflet-container in the styles, even though it is the base class in the first child <div> of <div class='geo'>

It works correctly up to commit 0cd8bbae9fded15be918886f6ec597d649054136 chore: use webpack for prod builds

[dubsky]

I can reproduce the problem and yes, this started after the upgrade to webpack. The leaflet style is present in the giraffe bundle, so you can do the following as a workaround:

import 'leaflet/dist/leaflet.css'

I will need to play with the webpack configuration a bit to fix it.

[hoorayimhelping]

And this is exactly why we're trying to consolidate our configuration. giraffe/storybooks/package.json includes style-loader, while giraffe/giraffe/package.json does not.