title: Import third-party JavaScript library that normally self-executes into React app (using create-react-app)
body: <p>I'm trying to use a third-party library in my React app (built via <code>create-react-app</code>) that is normally loaded via a <code>&lt;script&gt;</code> tag in html file.:</p>
  
  <blockquote>
    <p>index.html</p>
  </blockquote>
  
  <pre><code>    ...
      &lt;script src="some-library.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The script basically just calls itself at the end of the file:</p>
  
  <blockquote>
    <p>some-library.js</p>
  </blockquote>
  
  <pre><code>function foo() {
    ...
  }
  
  foo();
  </code></pre>
  
  <p>There are no modules or <code>export</code> statements, so it's not immediately clear to me how to use this in my React app.</p>
  
  <p>After installing the library with npm, I have tried using <code>import</code> and <code>require()</code> statements in my <code>App.js</code> file, without success:</p>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>import "some-library";                          // doesn't work
  require("some-library");                        // doesn't work
  const SomeLibrary = require("some-library");    // doesn't work
  
  ...
  </code></pre>
  
  <p>Some instructions about using third-party libraries in React suggest using the library within one of the React lifecycle hooks, like <code>componentDidMount()</code>, but there's no function I'm able to call from the library:</p>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>import React, { Component } from "react";
  import * as SomeLibrary from "some-library";
  
  class App extends Component {
    componentDidMount() {
      SomeLibrary.foo();  // doesn't work (wasn't exported in "some-library")
    }
  
    render() {
      ...
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The only solution I've been able to find is to copy <code>some-library.js</code> into my <code>public/</code> folder, and then include it as a <code>&lt;script&gt;</code> tag in <code>index.html</code>. This seems like an awkward solution though.</p>
  
  <p><strong>Is there a way to import this library in my <code>src/</code> JavaScript files for React instead of just as a <code>&lt;script&gt;</code> tag in <code>index.html</code>?</strong></p>
  
  <p>(For reference, the specific library I'm trying to use is <a href="https://github.com/WICG/focus-visible/" rel="noreferrer">https://github.com/WICG/focus-visible/</a>.)</p>