Using external dependencies in React loaded from CDN

user_5132452 0
Viewed 1863

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

reactjs cdn
3 Answers

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>
user_17516400

I think that it would be the best option to move to npm packages. First of all not all packages are available on cdn, secondly it will be hard to maintain versions of packages by using just script tags. I strongly recommend to go to npm/yarn direction and it is more preferable option even from react creators point of view.

You can use for example react create app https://create-react-app.dev/docs/getting-started/ easily to start implementing react app and then create dist file which you can include as script tag.

user_44327500

In the end, after much struggle with NPM, I decided to use Browserify to import NPM modules directly into my javascript. It works beautifully for what I need.

It works by bundling multiple javascript files into one single file (bundle.js). As it does so, it scans through the code for require(...) (which is invalid javascript), imports the relevant module and places this directly into bundle.js.

I use Watchify to automate this process. A running script keeps an eye out for changes to my code, then runs Browserify on it automatically.

For example, if I want to use react-string-replace, I simply do something like this:

const reactStringReplace = require('react-string-replace')

mergedPhrase = reactStringReplace(
 mergedPhrase,
 lookup,
 (match, k) => (
 replacement
 )
)
user_51324520
Related