Strange Crash from minimization -- even though ng-strict-di is happy. Why? - angularjs

I am seeing a strange crash in the Chrome and Firefox when my code initially loads:
Uncaught TypeError: angular.module(...).constant(...).constant(...).factory(...).factory(...).factory(...).directive(...) is not a function
Next I see a suspicious:
ReferenceError: io is not defined in my socket factory
angular.module("xxx").factory("socket", ...)
when it attempts to access io at the line containing:
var ioSocket = io("", {
path: "/socket.io-client"
})
NOTE: I only see this crash when running a non minimized version of the code.
This project was initially generated by yeoman angular-fullstack. Also I don't believe this second error has anything to do with having something wrong with importing socket.io/socket.io.js -- only an artifact of the first error.
NOTE:
grunt serve
works properly, but
grunt serve:dist
exhibits the crash above.
I originally thought that I had a dependency injection issue and so I turned on the directive ng-strict-di and was able execute grunt serve without any errors. SO this seems to suggest that the failure of grunt serve:dist isn't an injection issue, although I do have many packages being used.
Can you suggest some modifications to the yeoman settings that may help determine what is breaking the code during the build.
grunt serve:dist
basically adds:
concat, uglify, cssmin, and cdnigy
I already have uglify set to not mangle with the option: mangle:false.
I have been fighting with this for three days and I haven't made much progress. If you have any ideas, I would GREATLY appreciate it!
THANKS!
I am running node v4.4.4.
And the package.json file is:
{
"name": "tracker2",
"version": "1.0.0",
"main": "server/app.js",
"dependencies": {
"JSONStream": "^1.1.1",
"acorn": "^3.1.0",
"assert": "^1.3.0",
"aws-sdk": "^2.3.11",
"base64-stream": "^0.1.3",
"bcryptjs": "^2.3.0",
"bluebird": "^3.3.5",
"body-parser": "^1.15.1",
"bson": "^0.4.23",
"bson-objectid": "^1.1.4",
"codemirror": "^5.14.2",
"composable-middleware": "^0.3.0",
"compression": "^1.6.2",
"connect-mongo": "^1.1.0",
"connect-multiparty": "^2.0.0",
"cookie-parser": "^1.4.1",
"ejs": "^2.4.1",
"errorhandler": "^1.4.3",
"exectimer": "^2.0.0",
"express": "^4.13.4",
"express-handlebars": "^3.0.0",
"express-jwt": "^3.4.0",
"express-session": "^1.13.0",
"extend": "^3.0.0",
"gc-stats": "https://registry.npmjs.org/gc-stats/-/gc-stats-0.0.6.tgz",
"github": "^0.2.4",
"github-api": "^1.2.1",
"heapdump": "https://registry.npmjs.org/heapdump/-/heapdump-0.3.7.tgz",
"html2plaintext": "^1.0.1",
"htmlparser": "^1.7.7",
"htmlparser2": "^3.9.0",
"ical-generator": "^0.2.7",
"js-json": "^0.1.4",
"jsonwebtoken": "^6.2.0",
"jws": "^3.1.3",
"jwt-decode": "^2.0.1",
"lodash": "^4.12.0",
"method-override": "~2.3.3",
"mime-types": "^2.1.11",
"mocha": "^2.4.5",
"moment": "https://registry.npmjs.org/moment/-/moment-2.10.6.tgz",
"moment-timezone": "^0.5.4",
"mongodb": "^1.4.40",
"mongoose": "^4.4.14",
"mongoskin": "^1.4.13",
"monk": "^1.0.1",
"morgan": "^1.7.0",
"ng-file-upload": "^12.0.4",
"nodemailer": "^2.4.1",
"nodemailer-sendgrid-transport": "^0.2.0",
"nodemailer-sendmail-transport": "^1.0.0",
"passport": "^0.3.2",
"passport-facebook": "latest",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.10",
"passport-google-oauth": "latest",
"passport-local": "~1.0.0",
"passport-twitter": "latest",
"phantomjs-prebuilt": "^2.1.7",
"q": "^1.4.1",
"random-id": "0.0.2",
"rekuire": "^0.1.9",
"request": "^2.72.0",
"serve-favicon": "^2.3.0",
"sessionstore": "^1.2.13",
"shrinkwrap": "^0.4.0",
"socket.io": "^1.4.6",
"socket.io-client": "^1.4.0",
"socketio-jwt": "^4.3.4",
"sprintf-js": "^1.0.2",
"ssl-root-cas": "^1.1.10",
"tmp": "0.0.28",
"tracer": "^0.8.3",
"uri.js": "^0.1.3",
"uuid": "^2.0.2",
"xmldom": "^0.1.22"
},
"devDependencies": {
"connect-livereload": "^0.5.4",
"grunt": "^1.0.1",
"grunt-angular-templates": "^1.0.3",
"grunt-asset-injector": "^0.1.0",
"grunt-autoprefixer": "^3.0.4",
"grunt-build-control": "DaftMonk/grunt-build-control",
"grunt-concurrent": "^2.3.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-htmlmin": "^1.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-dom-munger": "^3.4.0",
"grunt-env": "~0.4.4",
"grunt-express-server": "^0.5.3",
"grunt-google-cdn": "~0.4.3",
"grunt-karma": "^1.0.0",
"grunt-mocha-test": "~0.12.7",
"grunt-newer": "^1.2.0",
"grunt-ng-annotate": "^2.0.2",
"grunt-node-inspector": "^0.4.1",
"grunt-nodemon": "^0.4.2",
"grunt-open": "~0.2.3",
"grunt-protractor-runner": "^3.1.0",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "^3.2.0",
"grunt-usemin": "^3.1.1",
"grunt-wiredep": "^2.0.0",
"jit-grunt": "^0.10.0",
"jshint-stylish": "^2.2.0",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-coffee-preprocessor": "^1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-html2js-preprocessor": "^1.0.0",
"karma-jade-preprocessor": "0.0.11",
"karma-jasmine": "^1.0.2",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-ng-jade2js-preprocessor": "^0.2.1",
"karma-ng-scenario": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-requirejs": "^1.0.0",
"karma-script-launcher": "^1.0.0",
"open": "~0.0.5",
"requirejs": "^2.2.0",
"should": "^8.3.1",
"supertest": "^1.2.0",
"time-grunt": "^1.3.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"start": "node server/app.js",
"test": "grunt test",
"update-webdriver": "node node_modules/grunt-protractor-runner/node_modules$
},
"private": true
}

This one was PAINFUL to find. It turns out that the minimization blows up the code IF there is a missing ';' SEMI-COLON at the end of the file with .directive. I found that angular-timezone-selector.js needed to have a ';' added at the end of the file. NOW all works as expected!
I HOPE THIS HELPS SOMEONE ELSE:
Key: check all you bower components that the *.js files end with a ';' where needed.

Related

Unexpected use of reserved word 'class' No stack

I'm trying to run a legacy react native app on my cellphone but I'm getting this strange error. I can't get any details or where on my code this problem exist.
I think it may be on some dependency. I'll put part of my package.json here:
{
"dependencies": {
"#react-native-community/async-storage": "^1.12.0",
"#react-native-community/clipboard": "^1.2.3",
"axios": "0.18.0",
"compare-versions": "^3.6.0",
"d3-geo": "1.11.6",
"formik": "1.5.1",
"geolib": "2.0.24",
"lodash": "4.17.11",
"moment": "2.24.0",
"native-base": "2.12.0",
"rbush": "^3.0.1",
"rbush-knn": "^2.1.0",
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-animatable": "1.3.1",
"react-native-camera": "1.12.0",
"react-native-config": "1.3.3",
"react-native-event-listeners": "^1.0.3",
"react-native-fs": "2.13.3",
"react-native-geojson": "^0.1.1",
"react-native-geolocation-service": "2.0.0",
"react-native-gesture-handler": "1.0.16",
"react-native-head-less-js": "1.0.6",
"react-native-image-crop-picker": "0.22.0",
"react-native-image-resizer": "1.0.1",
"react-native-keychain": "^3.1.3",
"react-native-maps": "0.25.0",
"react-native-masked-text": "1.11.0",
"react-native-permissions": "1.1.1",
"react-native-qrcode-scanner": "1.1.2",
"react-native-splash-screen": "3.2.0",
"react-native-swiper-flatlist": "1.0.10",
"react-native-version-check": "^3.4.0",
"react-native-zip-archive": "4.0.0",
"react-navigation": "3.3.0",
"react-redux": "6.0.1",
"realm": "2.29.2",
"redux": "4.0.1",
"redux-saga": "1.0.1",
"reduxsauce": "1.0.1",
"rn-fetch-blob": "0.10.15",
"seamless-immutable": "7.1.4",
"styled-components": "4.1.3",
"supercluster": "4.1.1",
"unorm": "1.5.0",
"uuid": "3.3.2",
"yup": "0.26.10"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-transform-remove-console": "6.9.4",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
}
}
It is a legacy project so react native version is 0.58.5 and I'm using node version 10 to run.

React migration to hooks

I started a new job and here the client is written in react. The big problem is that everything is very old and uses classes instead of React hooks. One simple example of an issue is the need to use mobx 6 or higher however this will require going over all the classes removing the #observable and changing it to make it observable. I don't even know how to start transitioning to a newer version of React with hooks since there is no way of doing it gradually only all at once. In any case if someone can help me with a suggestion or what can be done I will appreciated very much here is dependencies in my package.json if it's of any help
"dependencies": {
"babel-plugin-react-intl": "~3.0.1",
"babel-plugin-wildcard": "~2.1.2",
"bestzip": "^2.2.0",
"bootstrap": "~4.2.1",
"classnames": "~2.2.6",
"config": "~1.27.0",
"coreui.io": "^1.0.0-alpha.6",
"cross-env": "~5.2.0",
"event-emitter-es6": "~1.1.5",
"font-awesome": "~4.7.0",
"js-file-download": "~0.4.4",
"jsx-control-statements": "~3.2.8",
"lodash": "~4.17.4",
"mobx-react-intl": "~1.4.0",
"moment": "~2.20.1",
"papaparse": "~4.3.7",
"preact-context": "~1.1.2",
"query-string": "~6.1.0",
"react": "16.8.0",
"react-app-polyfill": "~0.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap-table": "~4.3.1",
"react-dates": "~20.0.0",
"react-dom": "16.8.0",
"react-fast-compare": "~2.0.4",
"react-fontawesome": "~1.6.1",
"react-google-charts": "~3.0.11",
"react-inlinesvg": "~0.6.2",
"react-interval": "~2.0.2",
"react-intl": "~2.8.0",
"react-json-view": "^1.19.1",
"react-ladda": "~6.0.0",
"react-rangeslider": "~2.2.0",
"react-router-dom": "~4.3.1",
"react-select": "~1.2.1",
"react-smooth-range-input": "~0.2.4",
"react-transition-group": "~1.2.1",
"reactstrap": "~7.1.0",
"shx": "^0.3.3",
"simple-line-icons": "~2.4.1",
"superagent": "~3.8.0",
"superagent-auth-bearer": "~0.0.1",
"svgo": "~1.0.3",
"three2": "npm:three#0.125.2",
"webpack-cli": "~3.2.1"
},
"devDependencies": {
"babel": "~6",
"babel-cli": "~6.24.1",
"babel-eslint": "~10.0.1",
"babel-loader": "~7.1.1",
"babel-plugin-flow-react-proptypes": "~3.3.0",
"babel-plugin-syntax-async-functions": "~6.13.0",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-polyfill": "~6.23.0",
"babel-preset-env": "~1.6.0",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-1": "~6.24.1",
"babel-preset-stage-2": "~6.24.1",
"babili-webpack-plugin": "~0.1.2",
"cobertura-merge": "*",
"copy-webpack-plugin": "~4.6.0",
"css-hot-loader": "~1.3.0",
"css-loader": "~2.1.0",
"eslint": "~4.4.1",
"eslint-config-wix": "~1.1.16",
"eslint-loader": "~1.9.0",
"extract-text-webpack-plugin": "~4.0.0-beta.0",
"file-loader": "~3.0.1",
"flow-bin": "~0.48.0",
"flow-status-webpack-plugin": "~0.1.7",
"html-webpack-plugin": "~3.2.0",
"install": "~0.10.1",
"jest": "~20.0.4",
"jest-cli": "~20",
"jest-html-reporters": "^1.2.1",
"jest-junit": "*",
"mobx": "~5.9.0",
"mobx-react": "~5.4.3",
"mobx-react-devtools": "~4.2.15",
"node-sass": "~4.14.0",
"nodemon": "~1.11.0",
"npm": "~5.3.0",
"optimize-css-assets-webpack-plugin": "~3.1.1",
"preact": "~10.0.0-alpha.0",
"preact-compat": "~3.18.4",
"react-c3js": "~0.1.20",
"resolve-url": "~0.2.1",
"resolve-url-loader": "~3.0.0",
"sass-loader": "~7.1.0",
"style-loader": "~0.18.2",
"svg-react-loader": "~0.4.6",
"url-loader": "~1.1.2",
"webpack": "~4.29.0",
"webpack-dev-server": "~3.1.14",
"webpack-merge": "~4.1.0"
},

react-scripts and bundle - Are all the 'require' and 'dependencies' added into the final bundle?

I am working in a React project that is using react-scripts in its version 3.4.4 among other dependencies and I have to check all the third-party libraries added into the final bundle.
As example, if I check the requires and dependencies from react-scripts in the package-lock.json file:
"react-scripts": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
"integrity": "sha512-7J7GZyF/QvZkKAZLneiOIhHozvOMHey7hO9cdO9u68jjhGZlI8hDdOm6UyuHofn6Ajc9Uji5I6Psm/nKNuWdyw==",
"requires": {
"#babel/core": "7.9.0",
"#svgr/webpack": "4.3.3",
"#typescript-eslint/eslint-plugin": "^2.10.0",
"#typescript-eslint/parser": "^2.10.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"fsevents": "2.1.2",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.2",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.8",
"ts-pnp": "1.1.6",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
},
"dependencies": {
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
}
}
},
My question is, are all the requires and dependencies such, as example, webpack-dev-server, dotenv, sass-loader added into the final bundle?
Thanks!
No. What Webpack ends up including is not something published or reported. Using react-scripts alone would seen hundreds of modules and versions being shipped in production. Any library you add on top just adds to that weight.
With tree shaking and build deps, you can't rely upon that requires at all. Some of those, like Jest or ESLint, are dev-only. They have no runtime. Others will. Some runtime deps will be shaken out too, so can't rely on just recognizing the lib.

After upgrading react, version stuck at 16.3.2

I have react 16.3.2, and today i attempted to upgrade it through yarn upgrade react#latest it has upgraded the yarn.lock's react#^16.8.2 but when I console.log out the react version it still outputs 16.3.2 Did I miss something?
Here's my package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"tj": "jest",
"test": "yarn jest --watch",
"coverage": "yarn jest --coverage || true",
"test:watch": "npm test -- --watch",
"start": "NODE_ENV=dev node server.js",
"startw": "NODE_ENV=dev nodemon --watch webpack.config.js server.js"
},
"jest": {
"setupTestFrameworkScriptFile": "./config/testSetupV1.js",
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(css)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(scss)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"globals": {
"__TEST__": true
}
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.42",
"#babel/preset-flow": "^7.0.0-beta.42",
"#babel/preset-react": "^7.0.0-beta.42",
"#babel/preset-stage-0": "^7.0.0-beta.42",
"#loadable/component": "^5.1.2",
"#welldone-software/why-did-you-render": "^2.3.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0-beta.2",
"babel-plugin-react-hot": "^1.0.4",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-register": "^6.23.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.0.4",
"enzyme-to-json": "^3.2.2",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^2.41.0",
"eslint-plugin-flowtype-errors": "^3.5.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.4.0",
"eslint-plugin-react": "^7.5.1",
"eslint_d": "^5.3.0",
"expect": "^1.16.0",
"extract-text-webpack-plugin": "^3.0.0",
"flow-bin": "^0.71.0",
"happypack": "^3.0.3",
"jest": "^23.6.0",
"jest-cli": "^23.6.0",
"jest-css-modules": "^1.1.0",
"jsdom": "^8.2.0",
"mocha": "^2.4.5",
"mocha-jsdom": "^1.1.0",
"node-sass": "^4.9.4",
"npm-check-updates": "^2.8.9",
"npm-install-webpack-plugin": "^4.0.4",
"postcss-global-import": "^1.0.1",
"postcss-loader": "^2.1.3",
"prettier-eslint": "^8.7.1",
"prettier-eslint-cli": "^4.7.0",
"raf": "^3.4.0",
"react-addons-test-utils": "^15.1.0",
"react-dev-utils": "^4.1.0",
"react-hot-loader": "^4.5.3",
"react-render-visualizer": "^0.2.2",
"react-testing-library": "5.2.3",
"redux-devtools": "^3.4.2",
"redux-devtools-chart-monitor": "^1.6.1",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-log-monitor": "^1.0.11",
"redux-slider-monitor": "^2.0.0-1",
"sass-loader": "^6.0.7",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"webpack": "^4.5.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.4",
"webpack-notifier": "^1.5.0",
"why-did-you-update": "^1.0.6"
},
"dependencies": {
"Faker": "^0.7.2",
"annyang": "^2.6.0",
"aphrodite": "^1.1.0",
"axios": "^0.16.1",
"chrono": "^1.0.5",
"chrono-node": "^1.2.5",
"classnames": "^2.2.5",
"color": "^0.11.3",
"counterpart": "^0.17.4",
"cuid": "^1.3.8",
"damals": "^0.9.4",
"date-fns": "^1.28.0",
"delay": "^1.3.1",
"draft-js": "^0.7.0",
"draft-js-export-html": "^0.3.0",
"fast-memoize": "^2.5.1",
"fecha": "^2.1.0",
"file-loader": "^0.8.5",
"flow-typed": "^2.4.0",
"focus-trap-react": "^3.1.2",
"folktale": "^2.0.1",
"friendly-truncate": "^1.0.3",
"futils": "^3.0.1",
"glamor": "^2.20.40",
"glamorous": "^4.11.0",
"hh-mm-ss": "^1.1.0",
"history": "^2.0.1",
"hms-time": "^0.1.1",
"humanize-plus": "^1.8.2",
"install": "^0.12.2",
"interact.js": "^1.2.8",
"intl": "^1.1.0",
"jason-form": "^0.0.3",
"lodash": "^4.13.1",
"memoizee": "^0.3.10",
"moment": "^2.17.1",
"node-quickbooks": "^2.0.20",
"normalizr": "^2.1.0",
"object-to-formdata": "^1.5.2",
"parse-address": "^0.0.10",
"password-generator": "^2.2.0",
"pluralize": "^3.0.0",
"postcss": "^5.2.17",
"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"prop-types": "^15.5.10",
"pubnub": "^4.13.0",
"query-string": "^4.2.2",
"query-string-parser": "^0.1.4",
"ramda": "^0.25.0",
"ramda-adjunct": "^2.10.0",
"ramda-fantasy": "^0.8.0",
"react": "^16.8.2",
"react-addons-shallow-compare": "^15.1.0",
"react-addons-text-content": "^0.0.4",
"react-calendar-timeline": "^0.11.1",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^16.8.2",
"react-dropzone": "^4.2.9",
"react-floating-label": "^1.0.0",
"react-fontawesome": "1.6.1",
"react-functional": "^1.2.0",
"react-grid-layout": "^0.16.0",
"react-hotkeys": "^0.10.0",
"react-idle": "^3.0.0",
"react-is": "^16.8.2",
"react-json-pretty": "^1.7.9",
"react-loadable": "^5.3.1",
"react-loadable-visibility": "^2.5.0",
"react-modal": "^3.1.0",
"react-player": "^0.25.0",
"react-quill": "^1.1.0",
"react-redux": "^4.4.5",
"react-resizable": "^1.7.1",
"react-router": "^3.0.0-beta.1",
"react-router-redux": "^4.0.0",
"react-rte": "^0.15.0",
"react-select": "^2.0.0-beta.7",
"react-spinners": "^0.1.5",
"react-stateful-fn": "^0.1.0",
"react-stateless": "^0.2.1",
"react-sticky": "^6.0.3",
"react-stripe-checkout": "^2.6.3",
"react-test-renderer": "^16.1.0",
"react-tiny-virtual-list": "^2.1.2",
"react-toastify": "^2.0.0",
"react-toolbox": "^2.0.0-beta.8",
"react-visibility-sensor": "^5.0.2",
"recharts": "^1.0.1",
"recompose": "^0.27.0",
"reduce-reducers": "^0.1.2",
"redux": "^3.5.2",
"redux-crud": "^3.2.0",
"redux-form": "^7.4.2",
"redux-mock-store": "^1.5.3",
"redux-saga": "^0.16.0",
"reselect": "^4.0.0",
"seamless-immutable": "^7.0.0",
"store2": "^2.7.0",
"url-loader": "^0.5.7"
}
}
Thanks in advance!
yarn upgrade does not update package.json, only the lock file. Actually, none of the yarn upgrade flags do. There's a long discussion about this in here
You can do the following:
Reinstall React with yarn add react#latest
Install a npm package to check updates, for example, npm-check-updates. Run it to update package.json and then try yarn install.
Or you can install that specific React version yarn upgrade react#16.8.2.
This is the intended behaviour, even though it is very confusing in the docs.

What is the correct api to use for enzyme

I am currently working on a react project with karma, enzyme as my test framework. I have gone through the enzyme document from: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md. In this document, it says that to.have.equal is the API to check a value. See below example.
expect(wrapper.find(Foo)).to.have.length(3);
but when I write my test cases, karma complains to is not defined. After some searching I have to use below code instead of to.have.equal.
expect(wrapper.find(Foo).length).toEqual(1);
The enzyme version is used is '^2.5.1'. Did I use a wrong version? Or the document is out of date? If so, where I can find the correct API document?
--EDIT1--
Below is the command I used to run karma:
./node_modules/karma/bin/karma start config/karma.conf.js --single-run --browsers PhantomJS
Below is the dependencies listed in my package.json file:
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.6.5",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-preset-airbnb": "^2.1.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-2": "^6.13.0",
"classnames": "^2.2.5",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"enzyme": "^2.5.1",
"eslint": "^3.0.1",
"eslint-plugin-babel": "^3.0.0",
"eslint-plugin-react": "^5.2.2",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.10.0",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.19",
"karma-babel-preprocessor": "^6.0.1",
"karma-browserify": "^5.0.0",
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.3.7",
"karma-mocha": "^0.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"koa": "^1.2.0",
"koa-router": "^5.4.0",
"koa-serve-index": "^1.1.1",
"koa-static": "^2.0.0",
"koa-views": "^4.1.0",
"koa-webpack-dev-middleware": "^1.2.1",
"koa-webpack-hot-middleware": "^1.0.3",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"loader-utils": "^0.2.16",
"phantomjs-prebuilt": "^2.1.4",
"postcss": "^5.1.2",
"postcss-display-inline-block": "^1.0.0",
"postcss-easysprites": "^0.1.7",
"postcss-import": "^8.1.2",
"postcss-less": "^0.14.0",
"postcss-loader": "^0.9.1",
"postcss-modules": "^0.5.0",
"precss": "^1.4.0",
"raphael": "^2.2.1",
"react-css-modules": "^3.7.6",
"react-hot-loader": "^1.3.0",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dashboard": "^0.0.1",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.12.2"
},
"dependencies": {
"axios": "^0.15.2",
"bootstrap": "^3.3.7",
"history": "^3.0.0",
"jquery": "^3.0.0",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.0.1",
"react-form": "^0.0.2",
"react-paginate": "^2.2.3",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-router": "^2.1.2",
"redux-thunk": "^2.1.0"
}
Enzyme (and AFAIK the examples) was written with Mocha in mind:
Enzyme was originally designed to work with Mocha [...]
See the Karma example:
it("contains spec with an expectation", function() {
expect(mount(<Foo />).find('.foo').length).toBe(1);
});
As the docs state:
Enzyme is compatible with Karma, but often requires a little bit of configuration.
Don't conflate test runners with rendering frameworks, or assertion libraries (like Chai) with either.

Resources