React-datepicker: Require is not defined - react-datepicker.min.js

[alex-wilmer]

Fresh install, typical React project:

npm install react-datepicker --save

import DatePicker from 'react-datepicker';

Pages crashes with

react-datepicker.min.js?1928:1 Uncaught ReferenceError: require is not defined

[martijnrusschen]

You'll need moment.js as a dependency. Please post your dependency tree if
you have already included moment.
On do 11 feb. 2016 at 20:34 Alex Wilmer [email protected] wrote:

Fresh install, typical React project:

npm install react-datepicker --save

import DatePicker from 'react-datepicker';

Pages crashes with

react-datepicker.min.js?1928:1 Uncaught ReferenceError: require is not defined

—
Reply to this email directly or view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/347.

[alex-wilmer]

I have [email protected] installed. Which part of the tree do you want me to post... it's too big for npm to show it all I think

[alex-wilmer]

here's package.json

{
  "name": "gdc-submission-system-ui",
  "private": true,
  "version": "0.3.20-spr1",
  "repository": {
    "type": "git",
    "url": "https://github.com/NCI-GDC/submission-ui.git"
  },
  "homepage": "https://github.com/NCI-GDC/submission-ui",
  "author": "OICR",
  "dependencies": {
    "d3": "^3.5.12",
    "filesaver.js": "0.2.0",
    "graphiql": "^0.4.5",
    "graphql": "^0.4.14",
    "history": "1.13.0",
    "isomorphic-fetch": "^2.2.0",
    "lodash": "^3.10.1",
    "moment": "^2.11.1",
    "normalize.css": "3.0.3",
    "rc-tooltip": "^3.3.1",
    "react": "^0.14.0",
    "react-addons-css-transition-group": "^0.14.6",
    "react-datepicker": "^0.21.0",
    "react-dnd": "^2.0.2",
    "react-dnd-html5-backend": "^2.0.2",
    "react-dom": "^0.14.6",
    "react-faux-dom": "^2.1.1",
    "react-icons": "^1.0.3",
    "react-motion": "^0.3.1",
    "react-redux": "^4.0.6",
    "react-router": "1.0.2",
    "redux": "^3.0.5",
    "redux-api-middleware": "v1.0.0-beta3",
    "redux-localstorage": "1.0.0-rc4",
    "redux-localstorage-filter": "0.1.1",
    "redux-router": "1.0.0-beta4",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": {
    "autobind-decorator": "1.3.2",
    "babel": "^6.3.26",
    "babel-core": "^6.4.0",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^6.2.1",
    "babel-plugin-lodash": "^1.1.0",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.1",
    "babel-preset-stage-0": "^6.3.13",
    "babel-register": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "babel-plugin-transform-regenerator": "6.3.26",
    "chai": "3.4.1",
    "chalk": "1.1.1",
    "compression-webpack-plugin": "0.2.0",
    "connect-gzip-static": "1.0.0",
    "conventional-changelog": "^0.5.3",
    "css-loader": "0.23.0",
    "david": "7.0.0",
    "eslint": "1.5.1",
    "eslint-config-airbnb": "0.1.0",
    "eslint-loader": "1.0.0",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-react": "3.4.2",
    "expect": "1.13.0",
    "express": "4.13.3",
    "express-http-proxy": "0.6.0",
    "extract-text-webpack-plugin": "0.9.1",
    "file-loader": "0.8.4",
    "flow-bin": "^0.20.1",
    "graceful-fs": "4.1.2",
    "isparta-instrumenter-loader": "1.0.0",
    "karma": "0.13.19",
    "karma-chai": "0.1.0",
    "karma-chai-sinon": "0.1.5",
    "karma-chrome-launcher": "0.2.1",
    "karma-cli": "0.1.1",
    "karma-coverage": "0.5.3",
    "karma-mocha": "0.2.1",
    "karma-mocha-reporter": "1.1.1",
    "karma-phantomjs-launcher": "0.2.1",
    "karma-sauce-launcher": "0.3.0",
    "karma-sourcemap-loader": "0.3.6",
    "karma-webpack": "1.7.0",
    "mocha": "2.3.4",
    "phantomjs": "1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "react-addons-test-utils": "0.14.0",
    "react-hot-loader": "1.3.0",
    "react-modal": "0.6.0",
    "react-transform-catch-errors": "1.0.0",
    "react-transform-hmr": "1.0.1",
    "redbox-react": "1.1.1",
    "redux-logger": "2.0.4",
    "sinon": "1.17.2",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.0",
    "url-loader": "0.5.6",
    "webpack": "1.12.2",
    "webpack-dev-middleware": "1.2.0",
    "webpack-dev-server": "1.12.0",
    "webpack-hot-middleware": "2.4.1",
    "escope": "3.3.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "start": "GDC_FAKE_AUTH=1 BASE=submission NODE_ENV=development make -j test server",
    "server:dev": "GDC_FAKE_AUTH=1 BASE=submission NODE_ENV=development make server",
    "server:stage": "GDC_FAKE_AUTH=1 NODE_ENV=stage make build server",
    "server:prod": "GDC_FAKE_AUTH=1 NODE_ENV=production make build server",
    "test": "make prepare"
  }
}

[martijnrusschen]

I'm not sure what's on line react-datepicker.min.js?1928, any chance to check if there's anything relevant?

[rafeememon]

@alex-wilmer, could you link us to the project that shows this problem (preferably a minimum-viable-project that shows this)? This could be any number of things, but I suspect it might have to do with the webpack setup.

[rafeememon]

Abandoned

[tsurelad]

Webpack usually has the configuration:

  module: {
    noParse: /\.min\.js/
  }

so the file react-datepicker/dist/react-datepicker.min.js is not being parsed. This file uses the require function which is NodeJS specific function.

[kostik-noir]

use
import DatePicker from 'react-datepicker/dist/react-datepicker';

[okcoker]

This is still an issue it seems.

I'm using webpack 2.4.1, with react/react-dom 15.6.

I dug a little deeper and found out it was the react-onclickoutside package. When removing all of these calls, my app built properly. So then I tried re-adding the onClickOutside calls and upgrading to the latest version 6.1.1.

Voila it worked.

Will send a PR shortly.