Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LibreMap breaks histoire #742

Open
6 tasks done
joleeee opened this issue Jul 10, 2024 · 4 comments
Open
6 tasks done

LibreMap breaks histoire #742

joleeee opened this issue Jul 10, 2024 · 4 comments
Labels
to triage This issue needs to be triaged

Comments

@joleeee
Copy link

joleeee commented Jul 10, 2024

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

@joleeee joleeee added the to triage This issue needs to be triaged label Jul 10, 2024
Copy link

stackblitz bot commented Jul 10, 2024

@joleeee joleeee changed the title LibreMap breaks history LibreMap breaks histoire Jul 10, 2024
@joleeee
Copy link
Author

joleeee commented Jul 10, 2024

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

@solita-markoma
Copy link

I'm also struggling with the same issue. I went through the histoire code and discovered that adding
window.URL.createObjectURL = window.URL.createObjectURL || function () { return ''; };
to `packages/histoire/src/node/dom/env.ts resolves it. However, I'm not entirely sure if this is the correct fix, as I don't have a deeper understanding of the system.

@solita-markoma
Copy link

It seems that jsDom does not implement createObjectURL. There is a similar, still open PR: #407. Based on that, I believe this is the correct way to address the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to triage This issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

2 participants