How can I add a CDN URL to my theme app extension?

[Divy_tatva]

Hello

From where I can add my cdn URL in theme app extension ?

When i added CDN in block files it's showing me this suggestion

"AssetSizeJavascript: JavaScript on every page load exceeds compressed size threshold (10000
Bytes), consider using the import on interaction pattern."

" RemoteAsset: Asset should be served by the Shopify CDN for better performance"

[deporter-shopst]

I am also getting this warning, my issue is when I use lazy loading in the react project and deploy to the theme app extension on shopify, the lazy loaded module is trying to load from the shop assets folder rather than the Shopify CDN, does anyway know a good way to manage this? Either by making the module load relative to the js file that is triggering the load of the next module or by somehow passing the cdn url into the project in a dynamic way that would update if the shopify cdn url changes. The CDN url has the following structure: https://cdn.shopify.com/extensions/<extension-id>/<extension-package-version>/assets/<file>.js

[mbpdev]

Did you ever figure this out? Running into the same issue.

[mbpdev]

Nevermind, Claude figured it out.

These are the contents of my entry.js, which lazy imports main.js and index.css, from the cdn:

(function () {
	function getBaseUrl() {
		const currentScript = document.currentScript || document.querySelector('script[src*="entry.js"]');
		console.log('currentScript', currentScript);
		if (currentScript) {
			const url = new URL(currentScript.src);
			return url.href.substring(0, url.href.lastIndexOf('/') + 1);
		}
		return '/';
	}

	function loadResource(url, type) {
		return new Promise((resolve, reject) => {
			const element = document.createElement(type === 'script' ? 'script' : 'link');
			if (type === 'script') {
				element.src=url;
				element.async = true;
			} else {
				element.rel = 'stylesheet';
				element.href = url;
			}
			element.onload = resolve;
			element.onerror = reject;
			document.head.appendChild(element);
		});
	}

	document.addEventListener('DOMContentLoaded', (event) => {
		const baseUrl = getBaseUrl();
		console.log('Base URL:', baseUrl);

		// Load CSS
		loadResource(baseUrl + 'index.css', 'css')
			.then(() => console.log('CSS loaded successfully'))
			.catch((error) => console.error('Failed to load CSS:', error));

		// Load the bundled React app
		loadResource(baseUrl + 'main.js', 'script')
			.then(() => console.log('React app loaded successfully'))
			.catch((error) => console.error('Failed to load React app:', error));

		console.log('Entry script loaded');
	});
})();