histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.14k stars 182 forks source link

LibreMap breaks histoire #742

Open joleeee opened 1 month ago

joleeee commented 1 month ago

Describe the bug

Using LibreMap in a story makes the collection fail. Note that adding the libremap component while the story is running, DOES work.

Error while collecting story /home/projects/histoire-svelte3-starter/src/MapLibre.story.svelte:
TypeError: window.URL.createObjectURL is not a function
    at define (/home/projects/histoire-svelte3-starter/node_modules/maplibre-gl/dist/maplibre-gl.js:34:44)
    at eval (/home/projects/histoire-svelte3-starter/node_modules/maplibre-gl/dist/maplibre-gl.js:46:1)
    at eval (/home/projects/histoire-svelte3-starter/node_modules/maplibre-gl/dist/maplibre-gl.js:6:81)
    at eval (/home/projects/histoire-svelte3-starter/node_modules/maplibre-gl/dist/maplibre-gl.js:9:3)
    at ViteNodeRunner.runModule (file:///home/projects/histoire-svelte3-starter/node_modules/vite-node/dist/client.mjs:359:11)
    at ViteNodeRunner.directRequest (file:///home/projects/histoire-svelte3-starter/node_modules/vite-node/dist/client.mjs:343:16)
    at async ViteNodeRunner.cachedRequest (file:///home/projects/histoire-svelte3-starter/node_modules/vite-node/dist/client.mjs:206:14)
    at async ViteNodeRunner.dependencyRequest (file:///home/projects/histoire-svelte3-starter/node_modules/vite-node/dist/client.mjs:240:12)
    at async eval (/home/projects/histoire-svelte3-starter/node_modules/svelte-maplibre/dist/AttributionControl.svelte:5:31)
    at async ViteNodeRunner.runModule (file:///home/projects/histoire-svelte3-starter/node_modules/vite-node/dist/client.mjs:359:5)

Reproduction

https://stackblitz.com/edit/histoire-svelte3-starter-91tfys?file=src%2FMapLibre.story.svelte

<script>
  import { MapLibre } from 'svelte-maplibre';

  export let Hst
</script>

<Hst.Story title="BaseButton">
  <MapLibre/>
</Hst.Story>

This is the most relevant info i found, but I could not get it to work: https://devpress.csdn.net/react/6304db157e6682346619cf34.html

System Info

npx: installed 1 in 1.293s

  System:
    OS: macOS 14.5
    CPU: (8) x64 Apple M2
    Memory: 38.73 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.21.3 - ~/.volta/tools/image/node/14.21.3/bin/node
    npm: 6.14.18 - ~/.volta/tools/image/node/14.21.3/bin/npm
    bun: 1.0.5 - ~/.volta/bin/bun
  Browsers:
    Brave Browser: 111.1.49.128
    Chrome: 126.0.6478.127
    Safari: 17.5

Used Package Manager

npm

Validations

stackblitz[bot] commented 1 month ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

joleeee commented 1 month ago

I changed my histoire.setup.ts (setupFile: '/src/histoire.setup.ts',) to

import './routes/styles.css';

window.doesNotExist = "asdf";
window.URL.createObjectURL = () => { };

And edited the crashing maplibre code:

if (typeof window !== 'undefined') {
    console.log(window.doesNotExist) // mine
    maplibregl.workerUrl = window.URL.createObjectURL(new Blob([workerBundleString], { type: 'text/javascript' }));
}

And i actually get this output:

asdf
Error while collecting story <redacted>.svelte:
TypeError: window.URL.createObjectURL is not a function

So this just makes it even weirder for me