Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to include external js minified/normal files in our React Project?

See original GitHub issue

Hello. I am working on migrating all my html code to react components. So far, I have been successful in creating individual components and importing css files to apply as global files. But the problem arises when I want to include script files.

My html code looks something like this:

  <link rel="stylesheet" href="some_stylesheet1">
  <link rel="stylesheet" href="some_stylesheet2">
  <link rel="stylesheet" href="some_stylesheet3">
  <script type="text/javascript" href="some_jquery_min_file.js"></script>
  <script type="text/javascript" href="some_min_file1.js"></script>
  <script type="text/javascript" href="some_min_file2.js"></script>
  <script type="text/javascript" href="some_min_file3.js"></script>
  <script type="text/javascript" href="some_min_file4.js"></script>

I had converted the above html file into individual react components and included it in App.js.My App.js file looks something like this:

import React from 'react';

import Component1 from 'some_path.js';
import Component2 from 'some_path.js';
import Component3 from 'some_path.js';

import 'path_to_stylesheet1.css';
import 'path_to_stylesheet2.css';
import 'path_to_stylesheet3.css';

class App extends React.Component{
  return (
     <Component1 />
     <Component2 />
     <Component3 />

Now the main problem is how should I include the js files most of them minified files. We can’t execute them by importing as I get Whole lot of errors as jQuery is not defined, define is not defined,… I can use a npm module for jquery and import it,but a whole lot of libraries have no npm modules.

Please help me find a solution for this.

Thank you

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

heyimalexcommented, Dec 28, 2019

Importing from ../src/... won’t work. There’s not really any magic here; everything in public is copied over, so you place your js under public and import with root-relative urls, the path /plugins/foo.js for the file ./plublic/plugins/foo.js. You should also prefix the urls with %PUBLIC_URL% so that your imports still work should you ever set it, but that’s not really necessary if you’re serving from root.

Im pretty sure there’s documentation on this over at the site if you want to check.

Read more comments on GitHub >

github_iconTop Results From Across the Web

4 Ways to Add External JavaScript Files in React
If you are a fan of Hooks in React, then useEffect is a great way to append external JS files. You can read...
Read more >
How to include an external JavaScript library to ReactJS
Step 1: Create a React application using the following command inside your terminal or command prompt: npx create-react-app name_of_the_app.
Read more >
How do I use external script that I add to react JS?
You can include the tag in the /public/index.html, and then use the script as you use it in normal JS code, following example...
Read more >
Add React to a Website
Create a file called like_button.js next to your HTML page. Open this starter code and paste it into the file you created. Tip....
Read more >
Declaratively loading JavaScript - Fullstack React
In our load() function, we'll loop through the list of scripts and create a single script tag for each one, appending it to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found