Solved

Lucidchart plugin iframe doesn't render

Forum|Forum|1 year ago
August 22, 2025
9 replies
250 views

Hello,

I am following this url about iframe Modal example, except I use a local html file under /public/forms

class releaseArchitectureModal extends Modal {
constructor(client: EditorClient) {
super(client, {
title: 'Release Architecture',
width: 800,
height: 600,
url: 'forms/releaseArchitectureForm.html',
});

}

The ifame shows up in developer mode and do its expected function, but it doesn’t show render the html content after installing the bundle. And I get this error in console

in fact exploring the html is empty in the browser resources.

Also I made sure the html file exist in the created zip file bundle

Are there any missing step I need to make in order to load the html file proberly?

Best answer by Nathan Kim

Hi @KGV !

Ben and I (he has been covering for me, thanks Ben) have a couple more suggestions to try.

First: Like you referenced earlier, could you send the contents of your webpack.config.js? Some changes to the build config might be needed. You should be able to send this file here (the contents by default have no specific information). However, if you would like, you can send us a private message or email, too.

Also, from Ben: Running through the following steps to create, upload, and install a bare-bones extension (with as minimal of changes as possible) will help us narrow down where the issue is. Could you try going through them?

Run the update sdk command (just to make sure you're on the most up-to-date version): npx lucid-package update-sdk
Create a brand new extension npx lucid-package@latest create (select Editor Extension in component selection step, no framework for custom UI)
Create a new app in the developer portal and update the package id in the newly created extension's manifest.json file to match (this should be the only manual change you need to make to files in the extension)
Bundle the new extension: npx lucid-package@latest bundle
Upload and install to the new app in the dev portal
Verify if you're still seeing the same issue of the html file not being uploaded properly

Thank you for your patience, especially with so many extra follow-ups.

-Nathan

B

Ben Winters

Lucid product team

Hey there, just to get some additional details and rule out the more obvious possibilities…

Have you re-uploaded the new zip file?
Have you installed the newly uploaded package version via the developer portal? (You can verify you’ve got the proper one installed by checking it’s version number against the version number in your extension’s
```
manifest.json
```
file
Have you refreshed the editor browser tab since uploading the package?

K

KGVAuthor

Hello,

Have you re-uploaded the new zip file?

Yes, after updating the version.

Have you installed the newly uploaded package version via the developer portal?

Yes

Have you refreshed the editor browser tab since uploading the package?

Yes

B

Ben Winters

Lucid product team

Interesting. What sort of content do you have inside that html file? Are you trying to make use of some external framework for example? Just trying to narrow down what sort of divergences you’ve made from the simple example here. I personally threw together a quick extension following the instructions on that page of the documentation, with the same modal class structure as you provided here (and putting the html in the same location in public) and had no issues with uploading and installing the package, so hoping to divine where your specific example may be different.

K

KGVAuthor

Hello @Ben Winters ,

I did the same as you suggested, a stripped down plugin with only the iframe Modal. I am pasting the code here maybe you can spot an issue!

Here is the extension.ts

import {EditorClient, Menu, MenuType, Modal} from 'lucid-extension-sdk';

class HelloWorldModal extends Modal {
constructor(client: EditorClient) {
super(client, {
title: 'Hello world',
width: 400,
height: 300,
url: 'index.html',
});
}
}

const client = new EditorClient();
const menu = new Menu(client);

client.registerAction('hello', () => {
const modal = new HelloWorldModal(client);
modal.show();
});

menu.addDropdownMenuItem({
label: 'Say Hello',
action: 'hello',
});

index.html content which exist under

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://lucid.app/public-styles.css">
</head>
<body>
<section class="layout">
<h1>Release Architecture Form</h1>
</section>
</body>
</html>

This works well under developer mode, but once it packaged and installed, the html file isnot found with 404 error.

Any suggestion how to debug or troubleshoot the issue?

Is there any change I need to do to the build files like webpack or tsconfig ?

B

Ben Winters

Lucid product team

I’ll keep looking into some things on my end. In the mean time, here’s a few things you can try on your end to debug/troubleshoot it:

Check that you’ve got the most up-to-date sdk version:

npx lucid-package update-sdk

Try building with build-editor-extension command (this command does everything to build the final extension.js file, but may be helpful in troubleshooting)

npx lucid-package build-editor-extension <name>

Check your package.zip file. If you extract it, you should be able to verify if the html file exists in the bundle (should be in the public folder)

Check if the network tab gives any more information on that 404 error

K

KGVAuthor

Hello @Ben Winters

I went through all the points with no real finding about the reason of not showing the html file

so sdk is up to date, but shows no errors or warnings, html file is exist in the bundle, network shows no thing more than a 404 from a url that isn’t curated by lucid.app , rather it is like this https://0894a81733d16ded79f0d9f2b23add3c.lucidextensions.app/extensibility/frames/3f213d5b-3879-47c8-82a3-ddca06f2c48c/index.html

K

KGVAuthor

Hello @Ben Winters , any feedback about that?

Richard Udell

Lucid support team

Hi @KGV, Ben and our team are looking into this and we’ll get back to you shortly with more information! Thanks for your patience in the meantime.

Nathan KimAnswer

Lucid product team

Hi @KGV !

Ben and I (he has been covering for me, thanks Ben) have a couple more suggestions to try.

First: Like you referenced earlier, could you send the contents of your webpack.config.js? Some changes to the build config might be needed. You should be able to send this file here (the contents by default have no specific information). However, if you would like, you can send us a private message or email, too.

Also, from Ben: Running through the following steps to create, upload, and install a bare-bones extension (with as minimal of changes as possible) will help us narrow down where the issue is. Could you try going through them?

Run the update sdk command (just to make sure you're on the most up-to-date version): npx lucid-package update-sdk
Create a brand new extension npx lucid-package@latest create (select Editor Extension in component selection step, no framework for custom UI)
Create a new app in the developer portal and update the package id in the newly created extension's manifest.json file to match (this should be the only manual change you need to make to files in the extension)
Bundle the new extension: npx lucid-package@latest bundle
Upload and install to the new app in the dev portal
Verify if you're still seeing the same issue of the html file not being uploaded properly

Thank you for your patience, especially with so many extra follow-ups.

-Nathan

Create an account in the community

Log in to the community