React-datepicker: Webpack error importing Date picker

Created on 16 Aug 2016 · 3Comments · Source: Hacker0x01/react-datepicker

Hi,
I'm new in webpack and React.
When trying to use this library with webpack could not import it.

this is the error:

ERROR in ../~/react-datepicker/dist/react-datepicker.min.js
Module not found: Error: Cannot resolve module 'imports' in /Users/arturpanach/projects/path/node_modules/react-datepicker/dist
@ ../~/react-datepicker/dist/react-datepicker.min.js 1:100-116

my setup:

Rails
using gem react_on_rails

_package.json_

"dependencies": {
    "autoprefixer": "^6.3.5",
    "axios": "^0.9.1",
    "babel": "^6.5.2",
    "babel-cli": "^6.6.5",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.6.1",
    "css-loader": "^0.23.1",
    "es5-shim": "^4.5.7",
    "expose-loader": "^0.7.1",
    "immutable": "^3.7.6",
    "imports-loader": "^0.6.5",
    "jquery": "^2.2.2",
    "jquery-ujs": "^1.2.1",
    "loader-utils": "^0.2.13",
    "lodash": "^4.7.0",
    "mirror-creator": "1.1.0",
    "moment": "^2.14.1",
    "react": "^0.14.8 || ^15.0.0",
    "react-datepicker": "^0.29.0",
    "react-dom": "^0.14.8 || ^15.0.0",
    "react-on-rails": "5.2.0",
    "react-redux": "^4.4.1",
    "redux": "^3.3.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.0.1",
    "webpack": "^1.12.14"
  },

Source

arturictus

Most helpful comment

ok, I fixed it:

npm install moment --save
npm install react-datepicker --save
npm install style-loader css-loader --save

_webpack.config_

resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
...

{ test: /\.css$/, loader: "style-loader!css-loader" },
  { test: /\.png$/, loader: "url-loader?limit=100000" },
  { test: /\.jpg$/, loader: "file-loader" }

I do not understand how this loaders affected the .js but it suddenly worked???

arturictus on 16 Aug 2016

👍13 🎉4 ❤1

All 3 comments

ok, I fixed it:

npm install moment --save
npm install react-datepicker --save
npm install style-loader css-loader --save

_webpack.config_

resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
...

{ test: /\.css$/, loader: "style-loader!css-loader" },
  { test: /\.png$/, loader: "url-loader?limit=100000" },
  { test: /\.jpg$/, loader: "file-loader" }

I do not understand how this loaders affected the .js but it suddenly worked???

arturictus on 16 Aug 2016

👍13 🎉4 ❤1

Worked for me as well. Thanks :)

bid007 on 8 Jun 2017

ok, I fixed it:

npm install moment --save
npm install react-datepicker --save
npm install style-loader css-loader --save

_webpack.config_

resolve: {
    extensions: ['', '.js', '.jsx', '.css'],
...

{ test: /\.css$/, loader: "style-loader!css-loader" },
  { test: /\.png$/, loader: "url-loader?limit=100000" },
  { test: /\.jpg$/, loader: "file-loader" }

I do not understand how this loaders affected the .js but it suddenly worked???

do still know to config the webpack ?