Are externalResources supposed to carry through when clicking the button to open CodeSandbox?

[dylanjha]

Link:

https://docs.mux.com/guides/video/mux-player#quickstart

This sandpack looks like:

import { Sandpack } from '@codesandbox/sandpack-react';

<Sandpack
  options: { externalResources: [`https://unpkg.com/@mux/mux-player`] },
  files={{
    "/index.html": {
      code: `
        <script src="https://unpkg.com/@mux/mux-player"></script>
        <mux-player
          stream-type="on-demand"
          playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
          metadata-video-title="Test video title"
          metadata-viewer-user-id="user-id-007"
        ></mux-player>`.trim(),
      active: true,
    },
    "/src/index.js": {
      code: "",
      hidden: true,
    },
  }}
/>

The sandpack itself works great, but then when clicking the icon to open up a new CodeSandbox it seems to be losing the externalResources.

[davekiss]

Is this possibly an oversight in Sandpack? I'm not seeing the customResources returned here:

sandpack/sandpack-react/src/utils/sandpackUtils.ts

Lines 24 to 104 in 469acb9

	export const getSandpackStateFromProps = (
	props: SandpackProviderProps
	): SandpackContextInfo => {
	// Merge predefined template with custom setup
	const projectSetup = getSetup({
	template: props.template,
	customSetup: props.customSetup,
	files: props.files,
	});
	// visibleFiles and activeFile override the setup flags
	let visibleFiles = props.options?.visibleFiles ?? [];
	let activeFile = props.options?.activeFile;
	if (visibleFiles.length === 0 && props?.files) {
	const inputFiles = props.files;
	// extract open and active files from the custom input files
	Object.keys(inputFiles).forEach((filePath) => {
	const file = inputFiles[filePath];
	if (typeof file === "string") {
	visibleFiles.push(filePath);
	return;
	}
	if (!activeFile && file.active) {
	activeFile = filePath;
	if (file.hidden === true) {
	visibleFiles.push(filePath); // active file needs to be available even if someone sets it as hidden by accident
	}
	}
	if (!file.hidden) {
	visibleFiles.push(filePath);
	}
	});
	}
	if (visibleFiles.length === 0) {
	// If no files are received, use the project setup / template
	visibleFiles = [projectSetup.main];
	}
	// Make sure it resolves the entry file
	if (!projectSetup.files[projectSetup.entry]) {
	/* eslint-disable */
	// @ts-ignore
	projectSetup.entry = resolveFile(projectSetup.entry, projectSetup.files);
	/* eslint-enable */
	}
	if (!activeFile && projectSetup.main) {
	activeFile = projectSetup.main;
	}
	// If no activeFile is specified, use the first open file
	if (!activeFile || !projectSetup.files[activeFile]) {
	activeFile = visibleFiles[0];
	}
	// If for whatever reason the active path was not set as open, set it
	if (!visibleFiles.includes(activeFile)) {
	visibleFiles.push(activeFile);
	}
	const files = addPackageJSONIfNeeded(
	projectSetup.files,
	projectSetup.dependencies ?? {},
	projectSetup.devDependencies ?? {},
	projectSetup.entry
	);
	const existOpenPath = visibleFiles.filter((path) => files[path]);
	return {
	visibleFiles: existOpenPath,
	activeFile,
	files,
	environment: projectSetup.environment,
	};
	};

[danilowoz]

Unfortunately, our API doesn't support externalResources, yet. I'm going to address this internally and make it available on Sandpack as soon as possible.

Thanks for reporting this issue

[goldenraphti]

Hi @danilowoz ,
any update on this?
as of end of January 2023 this issue is still present for me

Thanks a lot for all the hard work!