script for loadStoryblokBridge is injected twice

[oddcelot]

Describe the issue you're facing

I was trying out the storyblok integration for astro (with v5 beta) as was noticing this warning in the console:

Caution

Uncaught SyntaxError: Identifier 'loadStoryblokBridge' has already been declared (at page.js:14:24)

During dev this not an issue, but when building an error gets also thrown:

Caution

astro:scripts/page.js (14:23): Identifier "loadStoryblokBridge" has already been declared
file: astro:scripts/page.js:14:23

12:             
13: 
14:               import { loadStoryblokBridge, syncContentUpdate } from "@storyblok/astro";
                          ^
15:               loadStoryblokBridge().then(() => {
16:                 const { StoryblokBridge } = window;

 Hint:
   Browser APIs are not available on the server.
   
   If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a `client:only` directive to make the component exclusively run on the client.
   
   See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.
   

It seems like this is related to this section:

storyblok-astro/lib/index.ts

Lines 193 to 226 in c555207

	injectScript(
	"page",
	`
	import { loadStoryblokBridge } from "@storyblok/astro";
	loadStoryblokBridge().then(() => {
	const { StoryblokBridge, location } = window;
	${initBridge}
	storyblokInstance.on(["published", "change"], (event) => {
	if (!event.slugChanged) {
	location.reload(true);
	}
	});
	});
	`
	);
	}
	// This is only enabled if experimentalLivePreview feature is on
	if (resolvedOptions.livePreview) {
	injectScript(
	"page",
	`
	import { loadStoryblokBridge, handleStoryblokMessage } from "@storyblok/astro";
	import { bridgeOptions } from "virtual:storyblok-bridge";
	console.info("The Storyblok Astro live preview feature is currently in an experimental phase, and its API is subject to change in the future.")
	loadStoryblokBridge().then(() => {
	const { StoryblokBridge, location } = window;
	if(bridgeOptions){
	const storyblokInstance = new StoryblokBridge(bridgeOptions);
	storyblokInstance.on(["published", "change", "input"], handleStoryblokMessage);
	};
	});
	`

But looking at the config it seems fine and in line with the flow control here, so no idea why the script is injected both times, unless the resolved config is somehow different.

Reproduction

https://github.com/oddcelot/astro-storyblok

Steps to reproduce

No response

System Info

"@storyblok/astro": "5.1.0-alpha.4",
"astro": "5.0.0-beta.3"

Used Package Manager

pnpm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[oddcelot]

So i did try and patch this via pnpm patch and removing the additonal import seems to resolve the issues for dev and build 🎉
oddcelot/astro-storyblok@73855c8

[manuelschroederdev]

Hey @oddcelot, thank you very much for opening this issue and looking into it. @dipankarmaikap and I currently working on a new major release of @storyblok/astro and will address this.