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?
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
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.
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 ?
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
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
