Unable to embed a React app as a widget with JavaScript #9058

yogesnsamy · 2020-05-24T08:19:29Z

yogesnsamy
May 24, 2020

I've posted the question on StackOverflow but has not received any response so trying to get some guidance from here.

I tried to embed my react app as a widget into another site with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
      body {
        background-color: #ddd;
      }
      #mhub-opencalculator-root {
        margin: 10rem auto;
        width: 70vw;
      }
    </style>
  </head>
  <body>
      <h1>Hello Calculator</h1>
    <div id="mhub-opencalculator-root"></div>
    <script
      src="https://dev.mhub.my:3000/static/js/main.{{latest}}.js" type="text/javascript"></script>
    <script>
        document.cookie = 'cross-site-cookie=bar; SameSite=None; Secure';
      window.addEventListener('load', function () {
        const el = document.getElementById('mhub-opencalculator-root');
        if (el) {
          const w = new MHubOpenCalculatorWidget({
            document: '/lawyer/cases/case-b0000000000000000000',
            uploader: false,
            theme: {
              palette: {
                primary: {
                  main: '#2185d0',
                },
                background: {
                  paper: '#eee',
                },
              },
            },
          });
          w.render(el);
        }
      });
    </script>
  </body>
</html>

It's failing with the following message:

(index):27 Uncaught ReferenceError: MHubOpenCalculatorWidget is not defined
    at (index):27

MHubOpenCalculatorWidget.jsx in the react app has the following code (not handling the sent parameters yet):

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import { customTheme } from './contexts/theme';
import App from './App';

export default class MHubOpenCalculatorWidget {

  render(el) {
    console.log('inside widget');
    ReactDOM.render(
      <React.StrictMode>
        <ThemeProvider theme={customTheme}>
          <App />
        </ThemeProvider>
      </React.StrictMode>,
      el,
    );
  }
}

window.MHubOpenCalculatorWidget = MHubOpenCalculatorWidget;

As a standalone, the react app runs fine:

But fails when called from the other site:

Any tips will be appreciated, many thanks.

mrmckeb · 2020-05-27T18:06:02Z

mrmckeb
May 27, 2020

Are you able to share a small demo/reproduction of this project? I could take a look for you and see what's happening.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Unable to embed a React app as a widget with JavaScript #9058

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Unable to embed a React app as a widget with JavaScript #9058

Uh oh!

yogesnsamy May 24, 2020

Replies: 1 comment

Uh oh!

Uh oh!

mrmckeb May 27, 2020

yogesnsamy
May 24, 2020

mrmckeb
May 27, 2020