How to use Reactjs Datepicker when not using Webpack/Node?

Question

I am trying to build a reactjs page inside a VisaulForce Page(Salesforce) which means I can't easily setup webpack and all those great tools.

I been using babel-standalone which has helped alot but now I ran into the problem with trying to get a datepicker to work.

I have these scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"> </script

Then all my code is in between

 <script type="text/babel" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy"> </script>

I tried to use this datepicker plugin but I get the following errors

Uncaught TypeError: (0 , _reactOnclickoutside2.default) is not a function
    at Object.module.exports (react-datepicker.js:1003)
    at __webpack_require__ (react-datepicker.js:30)
    at Object.module.exports (react-datepicker.js:573)
    at __webpack_require__ (react-datepicker.js:30)
    at Object.defineProperty.value (react-datepicker.js:65)
    at __webpack_require__ (react-datepicker.js:30)
    at Object.defineProperty.value (react-datepicker.js:50)
    at react-datepicker.js:53
    at webpackUniversalModuleDefinition (react-datepicker.js:9)
    at react-datepicker.js:10

and

Datepicker is undefined.

maybe this will help? http://stackoverflow.com/questions/5786433/how-to-install-a-node-js-module-without-using-npm alternatively, why not just use the native input date? — A. L, May 17 '17 at 00:37

score 0 · Answer 1 · answered Aug 14 '19 at 02:05

The code in your question looks ok, but you have not shown how you are referencing the DatePicker plugin from react-datepicker; It is NOT enough to reference

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.8.0/react-datepicker.js"></script>

You must also reference the dependencies of this library; classnames, date-fns, prop-types, react-onclickoutside, react-popper

Then write a console.log(window) to check if the window.DatePicker object has loaded properly, and you can continue from there.

How to use Reactjs Datepicker when not using Webpack/Node?

1 Answers1