Yarn: Breaks build when using a package that depends on jQuery (react-bootstrap-daterangepicker)

[ConAntonakos]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
It breaks the bundled build due to breaking the following package: react-bootstrap-daterangepicker.

If the current behavior is a bug, please provide the steps to reproduce.
I build node_modules and build the bundled app using Webpack, which produces the following error when served:

What is the expected behavior?
For the build to work without breaking.

Please mention your node.js, yarn and operating system version.
node: 5.12.0
yarn: 0.16.1
os: macOS 10.11.6

[wyze]

Is yarn actually causing this error? What command are you running? What is the output? What does your package.json look like?

[ConAntonakos]

Thanks, @wyze, for responding. I'm not entirely sure if yarn is causing the issue, but I know I do not have this issue when using npm.

The command I'm running is node server.js, which is:

var path = require('path');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');

const port = 8080;

var server = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
  stats: {
    colors: true,
    progress: true,
  },
  proxy: {
    '/api/*': 
    {
      target: 'http://localhost:3000/',
      pathRewrite: {
        '^/api': ''
      }
    }
  }
})

server.use('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

server.listen(port, 'localhost', function(err, result) {
  if (err) {
    return console.log(err);
  }

  console.log(`Listening at http://localhost:${port}/`);
});

My package.json looks like:

  "bin": {
    "eslint": "./node_modules/eslint/bin/eslint.js",
    "gulp": "./node_modules/gulp/bin/gulp.js",
    "webpack": "./node_modules/webpack/bin/webpack.js"
  },
  "scripts": {
    "start": "node server.js",
    "build": "./node_modules/webpack/bin/webpack.js --progress --inline --colors",
    "build:prod": "NODE_ENV=production ./node_modules/webpack/bin/webpack.js --progress --inline --colors",
    "lint": "echo \"Nothing here yet...\"; exit 0;",
    "test": "NODE_ENV=test node --harmony_proxies node_modules/.bin/jest"
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "<rootDir>",
      "public/src"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "<rootDir>/test/styleMock.js"
    },
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "verbose": true
  },
  "author": "Con Antonakos",
  "contributors": [],
  "license": "ISC",
  "dependencies": {
    "array.prototype.find": "2.0.0",
    "axios": "0.12.0",
    "bluebird": "3.4.6",
    "bootstrap": "3.3.7",
    "boron": "0.2.3",
    "classnames": "2.2.5",
    "es6-promise": "3.2.1",
    "filesize": "3.3.0",
    "font-awesome": "4.6.3",
    "highcharts": "4.2.6",
    "immutable": "3.8.1",
    "immutablediff": "0.4.3",
    "inflected": "1.1.7",
    "jquery": "3.1.0",
    "json-loader": "0.5.4",
    "lodash": "4.15.0",
    "lodash.concat": "4.5.0",
    "lodash.debounce": "4.0.8",
    "lodash.difference": "4.5.0",
    "lodash.differenceby": "4.8.0",
    "lodash.every": "4.6.0",
    "lodash.filter": "4.6.0",
    "lodash.find": "4.6.0",
    "lodash.findindex": "4.6.0",
    "lodash.flatten": "4.4.0",
    "lodash.flattendeep": "4.4.0",
    "lodash.foreach": "4.5.0",
    "lodash.forin": "4.4.0",
    "lodash.get": "4.4.2",
    "lodash.groupby": "4.6.0",
    "lodash.has": "4.5.2",
    "lodash.includes": "4.3.0",
    "lodash.indexof": "4.0.5",
    "lodash.isempty": "4.4.0",
    "lodash.isequal": "4.4.0",
    "lodash.isnumber": "3.0.3",
    "lodash.isobject": "3.0.2",
    "lodash.isplainobject": "4.0.6",
    "lodash.keyby": "4.6.0",
    "lodash.map": "4.6.0",
    "lodash.max": "4.0.1",
    "lodash.merge": "4.6.0",
    "lodash.mergewith": "4.6.0",
    "lodash.min": "4.0.1",
    "lodash.orderby": "4.6.0",
    "lodash.pick": "4.4.0",
    "lodash.pull": "4.1.0",
    "lodash.range": "3.2.0",
    "lodash.reduce": "4.6.0",
    "lodash.reject": "4.6.0",
    "lodash.set": "4.3.2",
    "lodash.some": "4.6.0",
    "lodash.sortby": "4.7.0",
    "lodash.union": "4.6.0",
    "lodash.unionby": "4.8.0",
    "lodash.uniq": "4.5.0",
    "lodash.uniqueid": "4.0.1",
    "lodash.unset": "4.5.2",
    "lodash.values": "4.3.0",
    "lodash.zipobject": "4.1.3",
    "material-ui": "0.16.0",
    "moment": "2.14.1",
    "moment-timezone": "0.5.5",
    "normalizr": "2.2.1",
    "numbro": "1.9.3",
    "promise.prototype.finally": "1.0.1",
    "query-string": "4.2.3",
    "react": "15.3.2",
    "react-addons-shallow-compare": "15.3.2",
    "react-bootstrap-daterangepicker": "3.2.1",
    "react-datetime": "2.6.0",
    "react-dom": "15.3.2",
    "react-redux": "4.4.5",
    "react-router": "2.8.1",
    "react-router-redux": "4.0.5",
    "react-router-scroll": "0.3.2",
    "react-select": "1.0.0-rc.2",
    "react-tap-event-plugin": "1.0.0",
    "redux": "3.6.0",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.1.0",
    "rxjs": "5.0.0-beta.11",
    "ua-parser-js": "0.7.10",
    "validator": "5.6.0",
    "xlsx": "0.8.0"
  },
  "devDependencies": {
    "babel-core": "6.14.0",
    "babel-eslint": "6.1.2",
    "babel-jest": "16.0.0",
    "babel-loader": "6.2.5",
    "babel-plugin-syntax-async-functions": "6.13.0",
    "babel-plugin-transform-class-properties": "6.11.5",
    "babel-plugin-transform-object-rest-spread": "6.8.0",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-regenerator": "6.14.0",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-polyfill": "6.13.0",
    "babel-preset-latest": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-0": "6.5.0",
    "babel-runtime": "6.11.6",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "css-loader": "0.25.0",
    "del": "2.2.2",
    "enzyme": "2.4.1",
    "eslint": "2.13.1",
    "eslint-plugin-react": "3.16.1",
    "esutils": "2.0.2",
    "expect": "1.20.2",
    "expose-loader": "0.7.1",
    "file-loader": "0.9.0",
    "font-awesome": "4.6.3",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssnano": "2.1.2",
    "gulp-debug": "2.1.2",
    "gulp-eslint": "2.1.0",
    "gulp-flatten": "0.3.1",
    "gulp-if": "2.0.1",
    "gulp-imagemin": "2.4.0",
    "gulp-less": "3.1.0",
    "gulp-rename": "1.2.2",
    "gulp-size": "2.1.0",
    "gulp-sourcemaps": "1.6.0",
    "gulp-uglify": "1.5.4",
    "gulp-util": "3.0.7",
    "gulp-vulcanize": "6.1.0",
    "gulp-watch": "4.3.9",
    "handlebars-webpack-plugin": "0.1.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "16.0.2",
    "jest-cli": "16.0.2",
    "nock": "8.1.0",
    "node-libs-browser": "1.0.0",
    "node-sass": "3.9.3",
    "normalize.css": "4.2.0",
    "postcss-loader": "0.11.1",
    "react-addons-shallow-compare": "15.3.2",
    "react-addons-test-utils": "15.3.2",
    "react-hot-loader": "1.3.0",
    "react-test-renderer": "15.3.2",
    "redux-mock-store": "1.2.0",
    "require-dir": "0.3.0",
    "run-sequence": "1.2.2",
    "sass-loader": "3.2.3",
    "sinon": "1.17.5",
    "style-loader": "0.13.1",
    "superagent": "2.3.0",
    "url-loader": "0.5.7",
    "webpack": "1.13.2",
    "webpack-dev-server": "1.15.1",
    "yargs": "4.8.1"
  },
}

[donald-slagle]

I've ran into the same thing. Since I switch to yarn I now get the following when trying to use qTip2.

ERROR [app-router] TypeError: $(...).qtip is not a function(…)

I don't have this issue when I install with npm. I can build my project by running with either yarn or npm after I've installed with npm and both ways work fine. If I install with yarn first I get the issues where qtip is not found.

The only difference I can see between yarn/npm install is that yarn will create a node_modules folder in the qtip2 folder that contains the jquery dependency. I looked up the bootstrap-jquerydaterangepicker library and it also does the same thing. It seems that maybe with yarn install the jquery library is loaded with it's jquery dependency instead of through the version that is being used globally in the app.

[IanVS]

I've had this as well, with the moment-weekday-calc plugin. It (IMHO incorrectly) specifies moment as a dependency instead of a peer dependency, and then adds some methods to moment. With yarn, it has its own moment that it finds when it does a require, instead of finding the top-level moment that my app code is using.

To be more clear, my package.json includes:

dependencies: {
    "moment": "2.14.1"
}

and the package.json of moment-weekday-calc has:

dependencies: {
    "moment": "^2.10.2"
}

When using npm, it would install 2.14.1 at the root of my node_modules, and would treat that as satisfying the requirements of moment-weekday-calc. However, yarn installs another version of moment within moment-weekday-calc.

I'm submitting a PR to moment-weekday-calc to use a more-proper peer dependency, but I think this still exposes a dependency flattening difference between npm and yarn.

[johackim]

I have the same bug with slick-carousel library. This bug appear only with yarn, not with npm.

main.js:7 Uncaught TypeError: (0 , _expose$ExposeJQueryJquery2.default)(...).slick is not a function(…)

[ConAntonakos]

@wyze It looks like whatever was causing errors with the package with a peer dependency of jQuery has been resolved with the current version of yarn at the time of this writing (0.18.1).

[paleite]

I'm having this exact problem with yarn ^0.27.0 (with the same library as @stoneo mentioned).

[oliversong]

Having a similar issue to @IanVS. Similar to his findings, this seems to apply to all moment plugins that are installed via patching the global moment object. The two libraries I've found to be failing for yarn and not for npm are: moment-range@^2.0.0 and moment-duration-format@^1.3.0.

Interesting to note: in moment-range v3.x.x, they change the install method to an explicit redefinition instead of a patch, and this fixes the yarn dependency issue.