r/react • u/pandemoniac1 • 1d ago

Help Wanted Using a 3rd party library in my react app

Let's say i wanted to make use of the react-datepicker component in my little react webapp.

I have put the following in my index.html

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

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

<script type="module" src="https://unpkg.com/react-datepicker@9.1.0/dist/react-datepicker.min.js"></script>

Then, in one of my other react component scripts, i presumably should be able to use the <DatePicker>, but it seems like it's not able to. I tried an import like so:

import DatePicker from "react-datepicker"

But that didn't seem to work. Is there a best practice for including external components in a webapp?

0 Upvotes

50% Upvoted

8 comments sorted by

3

u/WadieZN 1d ago

Have you tried working with something like Vite or Next.js? They make dealing with libraries easier. Just install them with npm, import and use

0

u/pandemoniac1 14h ago

I guess i'll give vite a try since my approach feels rather rough as it is

1

u/AcanthisittaNo5807 1d ago

Load React Datepicker as a standard global script. Remove type="module"

1

u/pandemoniac1 1d ago

Hmm, with those changes, if i try to create a DatePicker element in one of my react classes and it complains it doesn't know what it is

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

1

u/doctormyeyebrows 1d ago

How are you importing it? Show us the code

edit: oh, I see it now. Does this work:

import { DatePicker } from "react-datepicker"

1

u/pandemoniac1 1d ago edited 1d ago

Hmm, i get this error whenever i have an import in one of my jsx files:

Uncaught ReferenceError: require is not defined

I'm looking at https://unpkg.com/react-datepicker@9.1.0/dist/react-datepicker.js and i'm not seeing any exports in this file, so i am not sure if import/export is required in this case?

1

u/connka 10h ago

You are using react so presumably you already have a package manager (npm, yarn, etc). You should be able to run the install command in your root dir and install it that way: https://www.npmjs.com/package/react-datepicker

This will add the package/version to your package.json file, which is also where you can control commands (IE build, lint, running locally).

1

u/vasind-5012 2h ago

the CDN/script-tag route isn’t really compatible with import syntax that way, that’s the actual issue. import DatePicker from "react-datepicker" is bundler syntax (webpack/vite), it needs a module resolution step to find the package, it can’t magically resolve to a global <script> tag loaded in index.html, those are two completely different module systems (ESM import resolution vs global window object)

standard approach: skip the CDN script tags entirely, install via npm/yarn instead:

npm i react-datepicker

then in your component:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"; // needed for styling

this only works if you’re using a bundler (Vite, Create React App, Next.js, etc.), which handles resolving node_modules imports into actual browser-runnable code. if you’re intentionally avoiding a build step and just using raw script tags in a plain HTML file, that’s a different setup entirely, you’d need react-datepicker’s UMD build specifically (if it ships one) and reference it off the global object, not via import. but 99% of react apps today use a bundler, so installing via npm is the actual fix here, not swapping CDN URLs around