Как импортировать приложение реагирования на веб-сайт, не основанный на React, с его библиотеками зависимостей

Question

У меня есть приложение реагирования, созданное с использованием приложения Create React, внутри которого я использую док-компонент, размещенный в npm.

  import Dock from "react-osx-dock";
    const app = React.createElement;
    class TestApp extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          visible: false,
          anchorEl: null,
       };
     }
     onClickBusProcess = (ev) => {
           this.setState({
            visible: true,
            anchorEl: ev.currentTarget,
         }); 
     };

     handleClose = () => {
       this.setState({
         anchorEl: null,
       });
     };
     render() {
       return (
         <div className="App">
           <Dock
            width={180}
            backgroundClassName={"dock-background"}
             magnification={1}
             magnifyDirection="down"
             >
            {[
              "imageName",
             ].map((item, index) => (
                 <Dock.Item key={index}>
                <img
                  src={`/images/${item}.png`}
                  onClick={this.onClickBusProcess}
                  alt={index}
             />
             <Menu
               key={index}
               id="simple-menu"
               anchorEl={this.state.anchorEl}
               keepMounted
               open={Boolean(this.state.anchorEl)}
               onClose={this.handleClose}
             >
               <MenuItem onClick={this.handleClose}>
                  Test Data 1
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                  Test Data 2
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                 Test Data 3
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                 Test Data 4
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                  Test Data 5
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                 Test Data 6
               </MenuItem>
               <MenuItem onClick={this.handleClose}>
                  Test Data 7
               </MenuItem>
             </Menu>
           </Dock.Item>
         ))}
       </Dock>
       hello world
     </div>
   );
 }
}


ReactDOM.render(app(TestApp), document.getElementById("react-app-root"));

Я пытаюсь импортировать приложение реакции на другой сервер, на котором размещен HTML стр.

         <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin> 
            </script>
            <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
            <script type="module" src="react-osx-dock" ></script>
            <script data-main = "scripts/main" src = 
         "https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

            <script src="js/mail-script.js" ></script>

             <script type="text/babel" src="TestApp.js"></script>

Хостинг этого HTML с использованием express. js

Я пытался использовать require. js, чтобы использовать требуемый модуль. Babel до сих пор я не могу импортировать зависимости. Когда у меня есть простой тег JSX без каких-либо зависимостей, он работает нормально. если я использую любой оператор импорта или переменную var = require ("зависимости"), как указано выше. Его ошибка и зависимости не импортируются как модуль.

Я получаю ниже Ошибка

***
GET http://localhost:5000/react-osx-dock/ net::ERR_ABORTED 404 (Not Found)

babel.min.js:24 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1
require.js:5 GET http://localhost:5000/scripts/main.js net::ERR_ABORTED 404 (Not Found)
req.load @ require.js:5
load @ require.js:5
load @ require.js:5
fetch @ require.js:5
check @ require.js:5
enable @ require.js:5
enable @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
enable @ require.js:5
init @ require.js:5
(anonymous) @ require.js:5
setTimeout (async)
req.nextTick @ require.js:5
s @ require.js:5
configure @ require.js:5
requirejs @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
require.js:5 Uncaught Error: Module name "react-osx-dock" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:5)
    at Object.s [as require] (require.js:5)
    at requirejs (require.js:5)
    at <anonymous>:11:12
    at i (babel.min.js:24)
    at r (babel.min.js:24)
    at e.src.n.<computed>.l.content (babel.min.js:24)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)
makeError @ require.js:5
s @ require.js:5
requirejs @ require.js:5
(anonymous) @ IQApp.js:1
i @ babel.min.js:24
r @ babel.min.js:24
e.src.n.<computed>.l.content @ babel.min.js:24
n.onreadystatechange @ babel.min.js:24
XMLHttpRequest.send (async)
s @ babel.min.js:24
(anonymous) @ babel.min.js:24
o @ babel.min.js:24
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1
require.js:5 Uncaught Error: Script error for "main"
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:5)
    at HTMLScriptElement.onScriptError (require.js:5)
makeError @ require.js:5
onScriptError @ require.js:5
error (async)
req.load @ require.js:5
load @ require.js:5
load @ require.js:5
fetch @ require.js:5
check @ require.js:5
enable @ require.js:5
enable @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
enable @ require.js:5
init @ require.js:5
(anonymous) @ require.js:5
setTimeout (async)
req.nextTick @ require.js:5
s @ require.js:5
configure @ require.js:5
requirejs @ require.js:5
(anonymous) @ require.js:5
***

Пожалуйста, помогите