Hi,
I have been given a ReactJS web component whose cource code is as follows:
import * as React from 'react';
import {createComponent} from '@lit-labs/react';
import {Button} from '../../components';
export const ExButton = createComponent(
React,
'ex-button',
Button
);
This react app is bundled into index.esm.js
file
My task is to use this component in a static website. I have created an html file as follows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<xml:namespace prefix="v" ns="urn:schemas-microsoft-com:vml"> </xml:namespace>
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/react@18.1.0/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/browserify@17.0.0/index.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!-- pre-packaged React web component-->
<script type="module" src='./react/index.esm.js'></script>
<!-- script to render the above component -->
<script type="text/babel" src='./react/reactjs-btn.js'></script>
</body>
</html>
The contents of reactjs-btn.js is as follows:
'use strict';
const btnContainer1 = document.querySelector('#button_container');
const btnroot = ReactDOM.createRoot(btnContainer1);
let element = <ExButton type="primary"></ExButton>;
btnroot.render(element);
I am running the html file on apache server. However, I get an error
Uncaught ReferenceError: ExButton is not defined
Is it even possible to render a previously packaged React component in a static website?
I would appreciate any help
Regards,
John
Top comments (4)
Hi @jvarghese
Have you tried StackOverflow or similar as a forum to get your question answered?
I am by no means a JavaScript or React developer, but my suggestion would be to make the simplest version using React that you possibly can, meaning even simpler than what you demonstrate.
If you read up on the error is might be due to the component not being available (ref)
I managed to get my example working by adding the following line to the ReactJs project
(window as any).ExButton = ExButtonI am not sure if there is any better way.
Glad to hear you got it to work.
Just out of curiosity - and only respond if you have the time.
const element = <ExButton type="primary"/>btnroot.render(element);
use this above and thn make
const btnContainer1 = document.querySelector('#button_container');const btnroot = ReactDOM.createRoot(btnContainer1);