Importing min.js file into ReactJS project

Question

I've been provided a min.js file from a third-party. And I want to import this into my existing ReactJS project.

I've found some samples on how to get started with their third-party features. Each sample follows this general approach though (where ABC.min.js below represents the file they have provided). The particular example below ends up rendering an image inside of the canvas:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    </head>
    <body>
        <div>
            <canvas id="canv123" style="width:250px;height:250px"></canvas>            
        </div>

        <script type="module">
            import * as ABC from "../ABC.min.js";

            let object = new ABC.foo("canv123");
            object.resrcEx = new ABC.BaseResrcEx("./assets");
            object.loadCfg("./cfgs/sample.json");
        </script>
    </body> 
</html>

Unfortunately, the third-party does not have their ABC package published (I cannot download it through yarn or npm ). I only have the ABC.min.js file which they've provided me. It contains the function calls that are being imported and executed inside the script tag (as per their sample above).

I'm not sure how this would translate into my existing ReactJS application (I'm trying to implement their example inside a React component). What is the best way to achieve this "in the ReactJS way"?

In particular, I'm not sure what is the best way to incorporate the ABC.min.js file and the logic associated with it (as per the example above). I've created a new react-component and inside of componentDidMount() I've tried placing the same code found inside their script tag above (... let object = new ABC.foo("canv123"); ...etc. etc) . But I am unable to do the declaration import * as ABC from ./ABC.min.js in the first place. Instead, I get error message that states " could not find a declaration file for module ./ABC.min.js ".

This link here sounds similar to what I need (but again, as mentioned in previous paragraph, in my case, it cannot find declaration file for the module): How to include custom JS files in to React create app

TLDR:

I'm trying to import a min.js file into a ReactJS project. The original publisher does not have the package accessible through npm / yarn . What are my options?

Answer 1

Based on your coding samples, I think you probably need to just do a React basics course. Some quick fixes if you want to keep pushing the boulder uphill:

First, use the something like create-react-app or next.js which will help you set up your project. These will require you use a package manager like yarn or npm . Use these to install babylonjs instead of jamming a script tag in the head of your doc. Remember, React doesn't work with a page model like you're thinking.
You need to use true JS imports instead of trying to load scripts in the head of your document. React will bundle your app and expects you to construct your application modularly. They look like this for babylon.js :

import { Scene, Engine } from 'babylonjs';

All these document.body.whatever in your code are very un-React. You need to be using the useRef hook to access the DOM in React. A ref, or reference, is how you connect your render method to other hooks and manipulate DOM nodes (which are JS objects in JSX when using React). Read up on it a bit, it's a lot to get your head around at first.

Good luck.

Importing min.js file into ReactJS project

Question

1 answers

solution1
1 2021-06-29 22:25:51

Importing min.js file into ReactJS project

Question

1 answers

solution1 1 2021-06-29 22:25:51

solution1
1 2021-06-29 22:25:51