<SandpackPreview> options.startRoute is not passed from <Sandpack> and therefore always hardcoded to /

[jantimon]

Bug report

Possibly the reason for:

#1289 #1286

Packages affected

• sandpack-client
• sandpack-react

Description of the problem

when using a self-hosted bundler served from a subdirectory (like /sandpack-bundler/index.html), the preview iframe always navigates to / instead of the bundler URL. this makes self-hosted setups fail with a connection timeout

the problem is that <Sandpack> never passes options.startRoute through to <SandpackPreview>:

sandpack/sandpack-react/src/presets/Sandpack.tsx

Lines 248 to 253 in 7d60a43

	<SandpackPreview
	actionsChildren={actionsChildren}
	showNavigator={options.showNavigator}
	showRefreshButton={options.showRefreshButton}
	style={topRowStyle}
	/>

so SandpackPreview always falls back to its default of "/":

sandpack/sandpack-react/src/components/Preview/index.tsx

Lines 98 to 117 in 7d60a43

	export const SandpackPreview = React.forwardRef<
	SandpackPreviewRef,
	PreviewProps & React.HTMLAttributes<HTMLDivElement>
	>(
	(
	{
	showNavigator = false,
	showRefreshButton = true,
	showOpenInCodeSandbox = true,
	showSandpackErrorOverlay = true,
	showOpenNewtab = true,
	showRestartButton = true,
	actionsChildren = <></>,
	children,
	className,
	startRoute = "/",
	...props
	},
	ref
	) => {

that "/" then gets passed as clientPropsOverride which takes priority over whatever you set in options.startRoute
it ends up in new URL("/", bundlerURL) which resolves to the origin root, completely ignoring the bundler path

the fix is just adding startRoute={options.startRoute} to the SandpackPreview in Sandpack.tsx.

I am really happy to send a PR if that helps