Allow imports in custom element

[Simon-Stone]

Currently, custom elements are only allowed to import from a list of allowed packages. This appears to exclude local packages, as well: When I tried to move some of the code in my CustomElement.jsx to another fileSomeHelperFunction.jsx, I am getting a "Cannot find ./SomeHelperFunction.jsx" in the app. The file is served at localhost:8000/public/elements/SomeHelperFunction.jsx, though.

It would be nice to be able to allow imports from local packages. Without that, everything but trivially complex custom elements quickly become needlessly large and reusing code across multiple custom elements is not possible.

[zakiatilyas]

Hi Guys, any updates on this issue please?

[PnsDev]

I found a workaround but it's very hacky. This is an example for Mermaid.

useEffect(() => {
        // Check if mermaid is already loaded globally
        if (typeof window !== 'undefined') {
            // Create a script element
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
            script.async = true;
            script.onload = () => {
                // Initialize mermaid after script is loaded
                if (window.mermaid) {
                    window.mermaid.initialize({ startOnLoad: true });
                    window.mermaid.contentLoaded();
                    console.log('Mermaid initialized');
                }
            };

            // Add script to document
            document.body.appendChild(script);

            // Cleanup function to remove the script when component unmounts
            return () => {
                if (script.parentNode) {
                    document.body.removeChild(script);
                }
            };
        }
    }, []);