Create-react-app: How to import external js

[lyw1991]

for example
add

in index.html
When I use test in componentDidMount
An error 'test' is not defined
How to solve this problem?

[Timer]

Where did you put the javascript in your index file?
Is the ordering correct if you view your page source?

[shrynx]

@lyw1991
since this is a global var, you can try window.test
eg:

componentDidMount() {
    console.log(window.test)
}

This should work.

[lyw1991]

@shrynx
It worked,thank you!

[shrynx]

The reason being, before our code can even start accessing external variables, it first compiles through webpack, during compilation if it cannot find the given variable it will fails to compile.
One way of doing it is using provide plugin in webpack, where we can specify javascript files and aliases they expose. Other being, making global variables and accessing using window

[gaearon]

Grabbing them from window is the way to go.
It is documented:

• Using Global Variables

Please read the User Guide, there are many useful tips there!

[mcopley08]

I really hope I'm overlooking something simple - but I'm running into an issue with this.

I'm able to write the code and have it execute in the browser correctly, because it shows the toast popup on the webpage, but then it shortly throws an error right after:

Code
componentDidMount() { window.Materialize.toast('hey', 1000); // eslint-disable-line }

index.html (bottom of it)

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
  <script src="static/js/bundle.js"></script>
</html>

Error message

TypeError: Cannot read property 'toast' of undefined
App.componentDidMount
src/App.js:131
  128 | 
  129 | componentDidMount() {
> 130 |   window.Materialize.toast('hey', 1000); // eslint-disable-line
  131 | }

Does anyone have an idea of what might be happening? I've created my app with create-react-app & have been searching through issues/documentation for quite a while now. Thank you!

[Timer]

That's odd @mcopley08; if you provide a reproducible demo we might be able to help but this issue isn't likely related to CRA.

[shaneosullivan]

I've written a small NPM module that may be of interest here, react-dependent-script.
https://github.com/shaneosullivan/ReactDependentScript/

You basically wrap your component in any external JS or CSS file that needs to be on the page before your component is rendered, and it makes sure to load them before your component is rendered. Maybe try it out?

[erdemalpkaya]

If you need to add an altmetrics badge to your ReactJS page you need to use @shaneosullivan solution.
Thanks a lot