Importing React component from custom component library into HTML-CodePudding

I created a test react component library (React, Typescript) and am trying to use Rollup to package it up into UMD to I can import the component into an HTML page.

The sample component I created just takes a label prop and colors it orange. Something super simple so complex logic would be taken out of the equation.

React code to render the above text:

import * as React from 'react';
import * as Test from 'react-webpack-demo';

function App() {
  return (
    <div>
      <h1>
        {
          React.createElement(Test.Brand, { label: 'Brand Label Text'})
        }
      </h1>
    </div>
  );
}

export default App;

The above component was packaged via Rollup into CJS format to be imported. I have also attempted to package the same content into UMD so it can be imported into HTML. The full rollup.config.js file is below:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';

import packageJson from './package.json';

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true
            },
            {
                file: packageJson.module,
                format: 'umd',
                name: 'Test',
                sourcemap: true
            }
        ],
        plugins: [
            resolve(),
            babel({
                exclude: 'node_modules/**',
                presets: [
                    '@babel/preset-react',
                    '@babel/preset-typescript'
                ]
            }),
            external(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' })
        ],
        external: [
            ...Object.keys(packageJson.dependencies || {}),
            ...Object.keys(packageJson.peerDependencies || {})
        ]
    }
]

I then attempt to import the newly packaged UMD file into my HTML page and render it into a DOM element as such:

<html lang="en-US">

<head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
    <h1>Testing rollup in plain HTML</h1>
    <hr />
    <div id='brand-test'></div>

    <script>
        const el = React.createElement;
        const domContainer = document.getElementById('brand-test');
        ReactDOM.render(el(
            Test.Brand,
            {
                label: 'Demo works!'
            }
        ), domContainer);
    </script>
</body>

</html>

But I get the following error:

The above error occurred in the component:

Brand@file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1

Uncaught TypeError: React__namespace.createElement is not a function Brand Brand.tsx:8 React 17 test.html:20 Brand.tsx:8:11

Any help would be greatly appreciated here.

Thanks in advance for your time!

CodePudding user response：

Seems like the script tag is in incorrect order. Your library needs React to be imported before it's script can be executed.

Just fix the order to get it working

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>