Hi!
The same issue & I've spent an entire day to find a solution. So,
the main key in my case was that "HTML Element-Name" in a
Remote app must be the same as you gave your app in the code.
Vue example (see: el: "company-remote-app",)
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
el: "company-remote-app",
vuetify,
render: (h) => h(App),
}).$mount("departments-remote-app");
React example (see: const ELEMENT_ID = 'company-remote-app';)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
class WebComponent extends HTMLElement {
connectedCallback() {
ReactDOM.render(<App />, this);
}
}
const ELEMENT_ID = 'company-remote-app';
if (!customElements.get(ELEMENT_ID)) {
customElements.define(ELEMENT_ID, WebComponent);
}
also see: https://liferay.dev/blogs/-/blogs/liferay-objects-and-remote-apps-how-can-we-connect-them-
