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:

<html>
<head>
  <link rel="stylesheet" href="some_stylesheet1">
  <link rel="stylesheet" href="some_stylesheet2">
  <link rel="stylesheet" href="some_stylesheet3">
</head>
<body>
  <div1>..........</div1>
  <div2>..........</div2>
  <div3>..........</div3>
  .
  .
  .
  .
  <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>
  .
  .
  .
  .
</body>

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{
 render(){
  return (
   <React.Fragment>
     <Component1 />
     <Component2 />
     <Component3 />
   </React.Fragment>
  )
 }
}

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:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

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.

0reactions

heyimalexcommented, Dec 28, 2019

https://create-react-app.dev/docs/using-the-public-folder#adding-assets-outside-of-the-module-system