Using external dependencies in React loaded from CDN

Question

I'm relatively new to ReactJS and am using it for certain interactive elements within an existing app. I import React and ReactDOM from a CDN:

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

And I write my ReactJS in JSX in some .js files that Babel translates and I import like this:

<script src="/static/react/NameScores.js"></script>

My problem is that I would sometimes like to use external dependencies and I cannot for the life of me figure out how to import them properly.

For example, I want to use react-card-flip. It appears to have a CDN, so I import it like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-card-flip/1.0.10/ReactCardFlip.min.js"></script>

But it doesn't work. I get a ReactCardFlip.min.js:1 Uncaught ReferenceError: exports is not defined at ReactCardFlip.min.js:1 error.

How can I make use of external dependencies with my CDN-based setup? Do I have to use NPM? I have tried, but could not get React to work via NPM, and the CDN is just much easier.

Thank you

Answer 1

While I'd recommend you to use npm, you can still use script tags but you must include a module loader, such as RequireJS for UMD builds:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>