The HTML example doesn't work if I import the dist openmct.js file via node_modules #7719
Comments
|
Hi! Could you let us know a little more about what you're trying to do? This repo is set up for development of core Open MCT only, meaning that in order to run it locally, you must use the webpack dev server ( If you're trying to develop a plugin for Open MCT, you can take a look at our project template-- openmct-hello. This is a work-in-progress, but should have everything you need to get started. If you're trying to use Open MCT as a dependency for another project, we will have an example template for this in the coming weeks. |
|
Hi @ozyx. Thank you for such a quick response. I am aiming to develop a plugin with openmct installed a dependency (exactly as is done in the openmct-hello repo). Thank you for the link. I thought I would be able to use the Do you know why importing the openmct.js script from node_modules doesn't work? |
|
@zachsa Which version are you using? Could you try installing from source and let us know if that fixes it? You can specify the version in your package.json like so: "openmct": "nasa/openmct"Edit: On second look, I think you may need to install the Conductor plugin. We unfortunately still have some coupling between the main app and some of the plugins. // Example from our sample index.html
const THIRTY_SECONDS = 30 * 1000;
const ONE_MINUTE = THIRTY_SECONDS * 2;
const FIVE_MINUTES = ONE_MINUTE * 5;
const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
const ONE_HOUR = THIRTY_MINUTES * 2;
const TWO_HOURS = ONE_HOUR * 2;
const ONE_DAY = ONE_HOUR * 24;
openmct.install(
openmct.plugins.Conductor({
menuOptions: [
{
name: 'Fixed',
timeSystem: 'utc',
bounds: {
start: Date.now() - THIRTY_MINUTES,
end: Date.now()
},
// commonly used bounds can be stored in history
// bounds (start and end) can accept either a milliseconds number
// or a callback function returning a milliseconds number
// a function is useful for invoking Date.now() at exact moment of preset selection
presets: [
{
label: 'Last Day',
bounds: {
start: () => Date.now() - ONE_DAY,
end: () => Date.now()
}
},
{
label: 'Last 2 hours',
bounds: {
start: () => Date.now() - TWO_HOURS,
end: () => Date.now()
}
},
{
label: 'Last hour',
bounds: {
start: () => Date.now() - ONE_HOUR,
end: () => Date.now()
}
}
],
// maximum recent bounds to retain in conductor history
records: 10
// maximum duration between start and end bounds
// for utc-based time systems this is in milliseconds
// limit: ONE_DAY
},
{
name: 'Realtime',
timeSystem: 'utc',
clock: 'local',
clockOffsets: {
start: -THIRTY_MINUTES,
end: THIRTY_SECONDS
},
presets: [
{
label: '1 Hour',
bounds: {
start: -ONE_HOUR,
end: THIRTY_SECONDS
}
},
{
label: '30 Minutes',
bounds: {
start: -THIRTY_MINUTES,
end: THIRTY_SECONDS
}
},
{
label: '15 Minutes',
bounds: {
start: -FIFTEEN_MINUTES,
end: THIRTY_SECONDS
}
},
{
label: '5 Minutes',
bounds: {
start: -FIVE_MINUTES,
end: THIRTY_SECONDS
}
},
{
label: '1 Minute',
bounds: {
start: -ONE_MINUTE,
end: THIRTY_SECONDS
}
}
]
}
]
})
); |
|
Thank you for the reply @ozyx. I moved the script tag to the header, and added the div#app tag to the body.. and it seems to work now: <!DOCTYPE html>
<html>
<head>
<title>Open MCT</title>
<script src="/node_modules/openmct/dist/openmct.js"></script>
<script defer>
document.addEventListener("DOMContentLoaded", function () {
openmct.setAssetPath("node_modules/openmct/dist");
openmct.install(openmct.plugins.LocalStorage());
openmct.install(openmct.plugins.MyItems());
openmct.install(openmct.plugins.UTCTimeSystem());
openmct.time.setClock("local", { start: -15 * 60 * 1000, end: 0 });
openmct.time.getTimeSystem("utc");
openmct.install(openmct.plugins.Espresso());
openmct.start();
});
</script>
</head>
<body>
<body>
<div id="app"></div>
</body>
</body>
</html>It seems like sometimes when I navigate to npx http-server -c-1Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'key')
at d.setUrlFromTimeApi (openmct.js:2:2637140)
at d.updateTimeSettings (openmct.js:2:2635773)
at d.initialize (openmct.js:2:2635136)
at o.emit (openmct.js:2:337020)
at Proxy.<anonymous> (openmct.js:2:2492616)
|
|
@zachsa Yep, looks like you need to install the time conductor plugin. See my above comment. Closing this for now, please re-open if you run into further issues. Cheers! |
The basic HTML example doesn't work if I import the dist openmct.js file via node_modules:
Loading that file via a web-server (
npx http-server -c-1) I get the following error from theopenmct.start()statement:openmct.js:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'key') at d.setTimeApiFromUrl (openmct.js:2:2636125) at d.updateTimeSettings (openmct.js:2:2635705) at d.initialize (openmct.js:2:2635136) at o.emit (openmct.js:2:337020) at Proxy.<anonymous> (openmct.js:2:2492616)I'm not sure if this approach is supported - I would prefer to work with
openmctvia the node_modules folder as a dep if possible, please let me know if this error is expected or if it is indeed a bug!To reproduce:
There is an additional error that I don't think is related to the above - the network request for
http://localhost:8080/inMemorySearchWorker.jsfails, since that is not in the root folder but is instead in the librarydist/folder. If I copy that file to my project root, the above error remains.The text was updated successfully, but these errors were encountered: