reactjs - Import third-party JavaScript library that normally self-executes into React app (using create-react-app) - Stack Over

admin管理员组

文章数量:1199820

I'm trying to use a third-party library in my React app (built via create-react-app) that is normally loaded via a <script> tag in html file.:

index.html

    ...
    <script src="some-library.js"></script>
  </body>
</html>

The script basically just calls itself at the end of the file:

some-library.js

function foo() {
  ...
}

foo();

There are no modules or export statements, so it's not immediately clear to me how to use this in my React app.

After installing the library with npm, I have tried using import and require() statements in my App.js file, without success:

App.js

import "some-library";                          // doesn't work
require("some-library");                        // doesn't work
const SomeLibrary = require("some-library");    // doesn't work

...

Some instructions about using third-party libraries in React suggest using the library within one of the React lifecycle hooks, like componentDidMount(), but there's no function I'm able to call from the library:

App.js

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;

The only solution I've been able to find is to copy some-library.js into my public/ folder, and then include it as a <script> tag in index.html. This seems like an awkward solution though.

Is there a way to import this library in my src/ JavaScript files for React instead of just as a <script> tag in index.html?

(For reference, the specific library I'm trying to use is /.)

I'm trying to use a third-party library in my React app (built via create-react-app) that is normally loaded via a <script> tag in html file.:

index.html

    ...
    <script src="some-library.js"></script>
  </body>
</html>

The script basically just calls itself at the end of the file:

some-library.js

function foo() {
  ...
}

foo();

There are no modules or export statements, so it's not immediately clear to me how to use this in my React app.

After installing the library with npm, I have tried using import and require() statements in my App.js file, without success:

App.js

import "some-library";                          // doesn't work
require("some-library");                        // doesn't work
const SomeLibrary = require("some-library");    // doesn't work

...

Some instructions about using third-party libraries in React suggest using the library within one of the React lifecycle hooks, like componentDidMount(), but there's no function I'm able to call from the library:

App.js

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;

The only solution I've been able to find is to copy some-library.js into my public/ folder, and then include it as a <script> tag in index.html. This seems like an awkward solution though.

Is there a way to import this library in my src/ JavaScript files for React instead of just as a <script> tag in index.html?

(For reference, the specific library I'm trying to use is https://github.com/WICG/focus-visible/.)

• javascript
• reactjs
• create-react-app

Share Improve this question Follow edited Mar 22, 2018 at 18:47 Dipak 2,30855 gold badges2424 silver badges5656 bronze badges asked Mar 22, 2018 at 18:40 MattSidorMattSidor 2,73944 gold badges2323 silver badges3333 bronze badges 2

• 1 I looked at the docs and the library doesn't seem to have any methods. As described under "Usage", add the script tag to your public index. Then add the CSS rule. As far as I can see, that's it. It's very possible however that it won't work for a React app, given that react keeps changing the DOM. – user5734311 Commented Mar 22, 2018 at 18:45
• Thanks Chris G, I was able to get it working by importing the javascript file itself instead of just naming the npm package in node_modules. See my answer below for more details. – MattSidor Commented Mar 22, 2018 at 20:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 19

I was able to get this working by directly importing the file from the library's dist folder, instead of just naming the library by itself.

I also needed to make sure to import the library first before any other libraries (e.g. React).

App.js

import "some-library/dist/some-library.js";
import React, { Component } from "react";
...

本文标签：