[Bug] Importing Leaflet Removes Dynamic Html Head on Build

Reporting a bug

I am experiencing a rather weird situation using this genius library (please feel free to point me to the chat if it’s better suited there or even directly to the Leaflet community).

I am generating dynamic html information in the build stage which works absolutely fine however as soon as I import leaflet which we would like to use in our contact form it removes the head information and we just do not understand why.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 736.20 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Safari: 13.0.4

Steps to Reproduce the problem

1. MVP can be found here git clone https://github.com/TimMcCauley/react-static-leaflet-head-bug.git
2. yarn install
3. yarn build && yarn serve
4. Check the markup after building with and without line 3 in react-static-leaflet-head-bug/src/containers/Post.js
5. With will strip out the dynamic Head and without react-helmet will build the html perfectly.

Expected Behavior

I would expect that importing leaflet would have no effect on the generation of the html head.

Reproducible Demo

https://github.com/TimMcCauley/react-static-leaflet-head-bug

[TimMcCauley]

@SleeplessByte you are a star… it finally WORKS, did exactly how you explained and it makes total sense. I updated the code in the repository:

https://github.com/TimMcCauley/react-static-leaflet-head-bug/blob/master/src/containers/Post.js

Cheers a bunch for this stunning hint!

/T

[SleeplessByte]

Given that src/core/Browser.js is targetting the browser – perhaps what you can try is conditionally import leaflet, for now. So basically, instead of doing:

import leafletthings from 'leaflet'

you only import it when in the browser (And not on build):

if (typeof document !== undefined) {
  import('leaflet').then(...)
  // or
  const leafletthings = require('leaflet')
}

If that makes it work, at least we know where to look.