common-master-integration-react v0.0.46

common-master-mfe-integration

1.Reason

hook to integrate web component in minutes

2.React tutorial

• install

  yarn add common-master-mfe-integration

• define remote main.js,
• input types and hook can get from this npm

import { useProjectMaster } from 'common-master-integration-react'

const props = {
  axios, fetch, routerFn, permissions, ...
}

export default function Page() {
  const [WebComponent] = useProjectMaster('http://localhost:3002/main.js')
  return <WebComponent title="1" name="2" {...props} />
}

3.Issues:

3.1.Missing ES5 class

• you can see this error :

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

• Add this polyfill into head of html to fix:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.3/custom-elements-es5-adapter.js"></script>