warning: critical dependencies

[craigcosmo]

I downloaded the pikaday.js, put it in vendor folder. When I use this plugin in my react app I got this warning

./app/vendor/pikaday.js
Critical dependencies:
33:29-36 the request of a dependency is an expression
 @ ./app/vendor/pikaday.js 33:29-36

This is how I included it in react

import 'moment'
import Pikaday from '../vendor/pikaday'
const sd = new Pikaday({ 
    field: this.refs['start-date']
})

screenshot of the actual error message

[ivancuric]

Same here.

[PhiLhoSoft]

It might be related to my problem, in a very similar context (I also have import Pikaday from 'pikaday' in my code).
In my case, Webpack doesn't complain about critical dependencies, but as described in the linked thread, "It usually means that every file below a certain path will be included into the bundle", and that's my problem: I get errors in the browser like:

./~/pikaday/tests/methods.js
Module not found: Error: Cannot resolve module 'expect.js' in D:\PhiLhoSoft\css-in-js-inferno-tests\node_modules\pikaday\tests
resolve module expect.js in D:\PhiLhoSoft\css-in-js-inferno-tests\node_modules\pikaday\tests
looking for modules in D:\PhiLhoSoft\css-in-js-inferno-tests\node_modules
D:\PhiLhoSoft\css-in-js-inferno-tests\node_modules\expect.js doesn't exist (module as directory)
resolve 'file' expect.js in D:\PhiLhoSoft\css-in-js-inferno-tests\node_modules

Ie. instead of just loading pikaday/pikaday.js, it tries to load the tests and other stuff, which is just plain wrong.
I am suspecting an issue in the package.json definition.

[craigcosmo]

I solved this problem. install the pikaday package from npm. Done

[PhiLhoSoft]

Ah, so my problem is different, since I installed pikaday from NPM.
I suppose you can close this issue then.

[craigcosmo]

no, maybe the same. You can try install latest webpack and wepback dev server. This is my current dev dependencies

"babel-cli": "^6.18.0",
		"babel-core": "^6.21.0",
		"babel-eslint": "latest",
		"babel-loader": "^6.2.10",
		"babel-plugin-react-intl": "^2.3.0",
		"babel-plugin-transform-decorators-legacy": "^1.3.4",
		"babel-plugin-transform-remove-console": "^6.8.0",
		"babel-preset-es2015": "^6.18.0",
		"babel-preset-react": "^6.16.0",
		"babel-preset-stage-0": "*",
		"babel-register": "^6.18.0",
		"chai": "^3.5.0",
		"clean-webpack-plugin": "^0.1.14",
		"cli": "^1.0.1",
		"copy-webpack-plugin": "^4.0.1",
		"css-loader": "^0.26.1",
		"enzyme": "^2.7.0",
		"es6-promise": "^4.0.5",
		"eslint": "^3.12.2",
		"eslint-plugin-flowtype": "^2.29.2",
		"eslint-plugin-mocha": "^4.8.0",
		"eslint-plugin-react": "^6.8.0",
		"extract-text-webpack-plugin": "^1.0.1",
		"file-loader": "^0.9.0",
		"flow-bin": "^0.37.4",
		"html-webpack-plugin": "^2.24.1",
		"imports-loader": "^0.7.0",
		"isomorphic-fetch": "^2.2.1",
		"jasmine": "^2.5.2",
		"jasmine-ajax": "^3.3.1",
		"jasmine-core": "^2.5.2",
		"jsdom": "^9.9.1",
		"json-loader": "^0.5.4",
		"karma": "^1.3.0",
		"karma-chrome-launcher": "^2.0.0",
		"karma-cli": "^1.0.1",
		"karma-jasmine": "^1.1.0",
		"karma-jasmine-html-reporter": "^0.2.2",
		"karma-phantomjs-launcher": "^1.0.2",
		"karma-sourcemap-loader": "^0.3.7",
		"karma-webpack": "^1.8.1",
		"mocha": "^3.2.0",
		"mocha-loader": "^1.0.0",
		"mocha-webpack": "^0.7.0",
		"node-sass": "^4.1.1",
		"nodemon": "^1.11.0",
		"null-loader": "^0.1.1",
		"open-browser-webpack-plugin": "0.0.3",
		"postcss-assets": "^4.1.0",
		"postcss-cssnext": "^2.9.0",
		"postcss-loader": "^1.2.1",
		"postcss-scss": "^0.4.0",
		"precss": "^1.4.0",
		"progress-bar-webpack-plugin": "^1.9.1",
		"react-addons-test-utils": "^15.4.1",
		"react-css-modules": "^4.1.0",
		"react-intl-translations-manager": "^4.0.0",
		"redux-logger": "^2.7.4",
		"redux-mock-store": "^1.2.1",
		"resolve-url-loader": "^1.6.1",
		"sass-loader": "^4.1.1",
		"sinon": "^1.17.6",
		"style-loader": "^0.13.1",
		"url-loader": "^0.5.7",
		"webpack": "^1.14.0",
		"webpack-dev-server": "^1.16.2",
		"webpack-directory-scan": "^1.1.226",
		"webpack-node-externals": "^1.5.4"

[PhiLhoSoft]

I think I solved my own issue by excluding node_modules from babel:

module:
{
	loaders:
	[
		{
			test: /\.js$/,
			loader: 'babel-loader',
			exclude: /node_modules/,
		},

This folder is often excluded by default in Webpack, this looks like an exception...

[wojciechczerniak]

Duplicate of #815