-1

I bought a html template with scripts and I want to create a react app. I add script to index.html of my react app like this:

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/vendor/modernizr-2.8.3.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/vendor/jquery.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/popper.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/main.js"
    ></script>

Why it doesn't always work? And it works only with async.

But if i try to use libraries like react-helmet or useEffect or import js file in index.js i get bunch of errors.


useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

Errors:

src/assets/js/vendor/jquery.min.js
  Line 2:1:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:1140:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:2095:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:5737:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:6613:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:6734:   Expected an assignment or function call and instead saw an expression
starball
  • 20,030
  • 7
  • 43
  • 238
Grigoriy
  • 1
  • 1

1 Answers1

0

I'm assuming that you have these files locally in your source code and somewhere under /src. To import them, you could use import in your App component.


// default imports

import "./assets/js/vendor/modernizr-2.8.3.min.js";
import "./assets/js/vendor/jquery.min.js";
import "./assets/js/popper.min.js";
import "./assets/js/main.js";

export default class App extends Component {
    // component code
}
Adnan Uddin
  • 16
  • 1
  • Thanks, but i have another problem now. I got error. Can you help me? Error: `src/assets/js/main.js Line 1032:4: 'jQuery' is not defined no-undef ` I found solution but it doesn't work [link](https://stackoverflow.com/questions/52806643/reactjs-error-failed-to-compile-define-is-not-defined) – Grigoriy Apr 11 '21 at 19:29
  • This error message indicates that jQuery is not being properly loaded or the package is not properly referenced. I'll need a bit of clarification but is jQuery installed? you can check in your package.json file. Otherwise, what does the jquery import look like in ``main.js``? – Adnan Uddin Apr 12 '21 at 21:49