CODEWITHSUNDEEP
javascriptadaptive-cards
MellifluousR
MellifluousR

Reputation: 21

Uncaught ReferenceError: ACDesigner is not defined

I am trying to build an HTML page with Adaptive Card Designer.

I am following the instructions, using the CDN approach per this documentation:

https://www.npmjs.com/package/adaptivecards-designer

Any input is appreciated. Thanks a lot! :)

It is throwing the following error:

Uncaught ReferenceError: ACDesigner is not defined

My HTML file is the following:

<html>

<head>
</head>
<script src="https://unpkg.com/adaptivecards@latest/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptive-expressions@4/lib/browser.js"></script>
<script src="https://unpkg.com/adaptivecards-templating@latest/dist/adaptivecards-templating.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<!-- <script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        let hostContainers = [];
        let designer = new ACDesigner.CardDesigner(hostContainers);
        designer.assetPath = "https://unpkg.com/adaptivecards-designer@latest/dist";
        require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' } });
        require(['vs/editor/editor.main'], function () {
            designer.monacoModuleLoaded();
        });
        designer.attachTo(document.getElementById("designerRootHost"));
    };
</script>

<body>
    <div id="designerRootHost"></div>
</body>

</html>

Upvotes: 2

Views: 351

Answers (1)

Canhua Li
Canhua Li

Reputation: 319

monaco-editor has impacts on the process of loading modules, please change the order and load adaptivecards-designer first

<!-- <script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer@latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>

Upvotes: 4

Related Questions