I've been working on a Vue macro application for specific functionality in NetSuite. Since I can't utilize npm or other package installers, I've resorted to using CDN. The Vue app and Ant Design are both functioning properly, but the issue lies in not picking up styles for any Ant Design components. Here's my code snippet:
<html>
<head>
<title>Auto Refresh Page</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe888b9bbecdd0ccd0cdcf">[email protected]</a>"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dece3f9a0e9e8fee4eae3a0fbf8e8cdbea3bfa3bfbd">[email protected]</a>/dist/antd.min.css" rel="stylesheet">
</link>
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3f302a733a3b2d37393073282b3b1e6d706c706c6e">[email protected]</a>/dist/antd.min.js"></script>
<script>
const app = Vue.createApp({
el: "#app",
data() {
return {
moduleLoaded: false,
currentRecordModule: null,
backgroundProcess: false,
showModal: false,
};
},
methods: {
init() {
const currentRecordModule = require(['N/currentRecord'], (currentRecord) => {
this.moduleLoaded = true
this.currentRecordModule = currentRecord
});
},
reloadPage() {
location.reload(true)
},
showAlert() {
this.showModal = true
const iframeHtml = '<iframe src="${activeBgTaskUrl}" style="width: 100%; height: 400px; border: none;"></iframe>';
},
handleShowBackgroundProcessAlert(event) {
if (event.target.id === 'showBackgroundProcessAlert') {
this.showAlert()
}
},
},
mounted() {
console.log('App mounted')
this.init();
document.addEventListener('click', this.handleShowBackgroundProcessAlert)
},
},
template: `<a-button icon="search" type="primary">Primary Button</a-button>
<a-modal v-model:visible="showModal" title="Basic Modal" @ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>`
});
app.mount('#app');
</script>
</body>
</html>
My goal is to trigger a modal in the showAlert function. Despite trying various approaches like direct access to the Ant Design global variable, utilizing the import statement, and the require method, none of them seem to work. The button displays without proper styling, as does the modal. Given that creating a Suitelet in NetSuite is not feasible.
EDIT
The ant design components aren't loading and issuing me these warnings:
[Vue warn]: Failed to resolve component: a-modal
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: a-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Edit-2
Upon inspecting my source in the browser, it appears like this:
While I can access Vue, accessing antd seems to be problematic. Any insights into why?