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?

Can you give example code of what you have tried and failed ? — Bao Huynh
– Bao Huynh, Commented Jun 29, 2021 at 20:35

serraosays · Accepted Answer · 2021-06-29 22:25:51Z

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.

answered Jun 29, 2021 at 22:25

serraosays

8,0693 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

daxer Over a year ago

Hey thanks for the response! I completely agree with everything you are saying. The attempt above is not the "ReactJS" way. One important thing to mention, is I am using an existing ReactJS project. I can't exactly start with create-react-app. I will investigate your third bullet point in more detail. The solutions I tried to find online mentioned using "React Hooks" (hence the useEffect()): betterprogramming.pub/… Thank you.

daxer Over a year ago

Also, although I am new to ReactJS, I don't think that is the main issue here. Relatively comfortable with it for now. Instead, I am uncertain about the 3rd-party's page-model. I'm trying to implement/translate that properly into ReactJS. This is mainly what my question is about. I tried proper ReactJS to the best of my knowledge (including downloading BabylonJS through npm). These attempts weren't rendering anything. Hence, I reluctantly tried to follow their structure as closely as possible for now to see if this gives results (hence the script tag being jammed in).

serraosays Over a year ago

If this is a current react project, 100% chance you have a package manager in play. Try using that instead of this craziness in your useEffect - that is not how to load external scripts in React.

serraosays Over a year ago

I like Ben Awad's YouTube channel for quick React tutorials: youtube.com/watch?v=W6AJ-gRupCs - but you have to understand the larger goals of a React project before this will make sense.

daxer Over a year ago

Thanks again! I'll review the tutorial. And yes, the project I'm using is current. I've been using yarn. Unfortunately, the third-party does not have their package published. I only have the ABC.min.js file which they've provided me. It contains the function calls that is being imported and executed inside the script tag (as per their sample).

|

Collectives™ on Stack Overflow

Importing min.js file into ReactJS project

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related