I have a Meteor / React application and it's throwing the following warning:
WARNING: npm peer requirements not installed:
- react#15.3.2 installed, react#0.14.x needed
- react-dom#15.3.1 installed, react-dom#0.14.x needed
- react-addons-transition-group#15.3.1 installed, react-addons-transition-group#0.14.x needed
- react-addons-css-transition-group#15.3.1 installed, react-addons-css-transition-group#0.14.x needed
- react-addons-linked-state-mixin#15.3.1 installed, react-addons-linked-state-mixin#0.14.x needed
- react-addons-create-fragment#15.3.1 installed, react-addons-create-fragment#0.14.x needed
- react-addons-update#15.3.1 installed, react-addons-update#0.14.x needed
- react-addons-pure-render-mixin#15.3.1 installed, react-addons-pure-render-mixin#0.14.x needed
- react-addons-test-utils#15.3.1 installed, react-addons-test-utils#0.14.x needed
- react-addons-perf#15.3.1 installed, react-addons-perf#0.14.x needed
The dependencies in my package.json file are as follows:
"dependencies": {
"bcrypt": "^0.8.7",
"browser": "^0.2.6",
"growl": "^1.9.2",
"jade": "^1.11.0",
"jquery": "^3.1.0",
"meteor-node-stubs": "^0.2.1",
"mocha": "^2.4.5",
"moment-timezone": "^0.5.3",
"react": "^15.3.2",
"react-addons-create-fragment": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-addons-linked-state-mixin": "^15.3.1",
"react-addons-perf": "^15.3.1",
"react-addons-pure-render-mixin": "^15.3.1",
"react-addons-test-utils": "^15.3.1",
"react-addons-transition-group": "^15.3.1",
"react-addons-update": "^15.3.1",
"react-data-components": "^1.1.0",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-select2-wrapper": "^1.0.2",
"react-textarea-autosize": "^4.0.5",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel": "^6.3.26",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.0",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-plugin-meteor": "^3.4.0",
"eslint-plugin-react": "^4.2.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-hot-middleware": "^2.4.1"
}
The package file in the .meteor directory is a follows:
less#2.7.5
tidee-fontello
tidee-asset-loader
tidee-fonts
tidee-css
accounts-password#1.3.0
accounts-base#1.2.11
raix:handlebar-helpers
meteorhacks:zones
random#1.0.10
osv:mongo-counter
reywood:publish-composite
zenniz:jquery-placeholder
tidee-jquery-resize
reactive-var#1.0.10
gwendall:template-animations
meteor-base#1.0.4
mobile-experience#1.0.4
mongo#1.1.12
session#1.1.6
tracker#1.1.0
logging#1.1.15
reload#1.1.10
ejson#1.0.12
spacebars#1.0.12
check#1.2.3
tap:i18n
react-meteor-data
meteorhacks:unblock
dburles:collection-helpers
standard-minifier-css#1.2.0
standard-minifier-js#1.2.0
tomwasd:history-polyfill
blaze-html-templates#1.0.4
es5-shim#4.6.14
practicalmeteor:mocha
ecmascript#0.5.8
react
tidee-data-tables
aldeed:collection2
fongandrew:find-and-modify
jagi:astronomy
jagi:astronomy-validators
mouse0270:bootstrap-notify
gwendall:tapi18n-react
shell-server
tidee-bootstrap-3.3.7
tidee-jquery-ui-1.11.4.custom
There is no indication of which package is causing these warnings to occur. Is there any way to find this out? Alternatively, is there a way to hide this warning from being sent to the browser console?
Related
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"
},
I installed react native into my app. And now I can't start my app.
I show you code from a package.json, my code from component and error code. I tried to install react-native from npm but now I past something from react-native-app.
package.json:
"dependencies": {
"apollo-cache-inmemory": "^1.1.10",
"apollo-client": "^2.2.6",
"apollo-link-http": "^1.5.3",
"babel-polyfill": "^7.0.0-beta.2",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"bunyan": "^1.8.12",
"cookie-parser": "^1.4.3",
"core-js": "^2.5.1",
"express": "^4.16.1",
"express-jwt": "^5.3.0",
"graphql": "^0.11.7",
"graphql-tag": "^2.5.0",
"history": "^4.7.2",
"htmlparser2": "^3.9.2",
"isomorphic-style-loader": "^4.0.0",
"json2csv-stream": "^0.1.4",
"jsonwebtoken": "^8.0.1",
"libphonenumber-js": "^0.4.38",
"moment": "^2.20.1",
"morgan": "^1.9.0",
"node-fetch": "^1.7.3",
"normalize.css": "^7.0.0",
"pretty-error": "^2.1.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.0",
"react": "16.6.3",
"react-native": "0.57.8",
"react-apollo": "^2.0.4",
"react-awesome-modal": "^2.0.5",
"react-collapsible": "^2.0.3",
"react-dom": "^16.0.0",
"react-google-maps": "^9.4.5",
"react-loadable": "^5.5.0",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.4",
"react-textarea-autosize": "^5.2.1",
"serialize-javascript": "^1.3.0",
"source-map-support": "^0.5.0",
"universal-router": "^4.2.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^7.1.4",
...(babel)
"browser-sync": "^2.18.13",
"metro-react-native-babel-preset": "0.51.1",
"chokidar": "^1.7.0",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.6.0",
"eslint-import-resolver-node": "^0.3.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-css-modules": "^2.7.5",
"eslint-plugin-flowtype": "^2.38.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"file-loader": "^1.1.5",
"flow-bin": "^0.56.0",
"front-matter": "^2.2.0",
"glob": "^7.1.2",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^21.2.1",
"jscodeshift": "^0.3.32",
"lint-staged": "^4.2.3",
"markdown-it": "^8.4.0",
"mkdirp": "^0.5.1",
"null-loader": "^0.1.1",
"pixrem": "^4.0.1",
"pleeease-filters": "^4.0.0",
...(postcss)
"prettier": "^1.7.4",
"raw-loader": "^0.5.1",
"react-deep-force-update": "^2.1.1",
"react-dev-utils": "^4.1.0",
"react-error-overlay": "^2.0.2",
"react-test-renderer": "^16.0.0",
"rimraf": "^2.6.2",
"stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0",
"stylelint-order": "^0.7.0",
"svg-url-loader": "^2.2.0",
"url-loader": "^0.6.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-node-externals": "^1.6.0"
},
code from component:
import { Dimensions } from 'react-native';
const deviceWidth = Number(Dimensions.get('window').width - 'px');
render() { ...
const slidesStyles =
deviceWidth >= 800
? {
width: `${100 * children.length / 3}%`,
transform: `translateX(${-1 *
index *
(100 / children.length / 3)}%)`,
}
: {
width: `${100 * children.length}%`,
transform: `translateX(${-1 * index * (100 / children.length)}%)`,
}; ...}
and error code (it's too big, but all errors link with it):
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Can you help me to start my app?
The issue looks like with node_modules folder. Try to delete your node_modules folder using command rm -rf node_modules and then run npm install and then run your app using react-native run-android or react-native run-ios
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.
When I run the command
npm install react-d3-tooltip --save
it shows the following warning on the terminal like as in the attached image. Unmet peer dependency react#0.14.7.
My package.json file includes the following dependencies
"devDependencies": {
"babel-core": "6.17.0",
"babel-eslint": "7.0.0",
"babel-loader": "6.2.5",
"babel-preset-es2015": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-1": "6.16.0",
"cheerio": "0.22.0",
"colors": "1.1.2",
"copy-webpack-plugin": "3.0.1",
"css-loader": "0.25.0",
"eslint": "2.8.0",
"eslint-plugin-react": "6.3.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"jquery": "2.2.2",
"jsdom": "9.6.0",
"json-loader": "0.5.4",
"node-sass": "3.10.1",
"postcss-loader": "0.13.0",
"react-hot-loader": "3.0.0-beta.5",
"redux-devtools": "3.3.1",
"redux-devtools-dock-monitor": "1.1.1",
"redux-devtools-log-monitor": "1.0.11",
"redux-immutable-state-invariant": "1.2.4",
"redux-slider-monitor": "1.0.7",
"rimraf": "2.5.4",
"sass-loader": "4.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dashboard": "0.2.0",
"webpack-dev-server": "1.16.2"
},
"dependencies": {
"autoprefixer": "6.5.0",
"classnames": "2.2.5",
"d3": "4.2.8",
"http-server": "0.9.0",
"lodash": "4.16.3",
"react": "15.3.2",
"react-bootstrap": "0.30.5",
"react-d3-tooltip": "1.4.14",
"react-dom": "15.3.2",
"react-intl": "2.1.5",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-bootstrap": "0.23.1",
"redux": "3.6.0",
"redux-form": "6.1.0",
"redux-intl": "1.0.1",
"semantic-ui-react": "0.56.1"
}
How I can solve this unmet peer dependency
Since upgrading React and Babel, I'm getting this error in one of my files. It is clearly a phantom error as everything worked fine before and this file wasn't changed at all. Does anyone have a clue what is happening here and how I can fix it?
The error
Uncaught Error: Relay transform error Syntax Error FileXYZ - Unexpected character "\u2028".
9: user_id
10: user_name
^
in file XYZ. Try updating your GraphQL schema if an argument/field/type was recently added.
My previous package.json was like this:
"dependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-react": "^6.0.0",
"babel-relay-plugin": "^0.3.0",
"es5-shim": "^4.5.7",
"graphiql": "0.6.6",
"graphql": "^0.4.18",
"history": "1.13.1",
"isomorphic-fetch": "^2.1.1",
"react": "^0.14.8",
"react-addons-shallow-compare": "^0.14.0",
"react-chartjs": "^0.6.0",
"react-dom": "^0.14.0",
"react-loader": "^2.0.0",
"react-relay": "^0.4.0",
"react-router": "1.0.0-rc3",
"react-router-relay": "^0.7.0",
"superagent": "^1.2.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"babel-eslint": "^3.1.30",
"babel-jest": "^5.3.0",
"jest-cli": "^0.9.0",
"react-addons-test-utils": "^0.14.0-beta3"
},
Now it is like this:
"dependencies": {
"babel-polyfill": "^6.9.1",
"babel-runtime": "^6.9.2",
"es5-shim": "^4.5.7",
"graphiql": "0.7.3",
"graphql": "^0.6.2",
"history": "1.13.1",
"isomorphic-fetch": "^2.1.1",
"react": "^15.2.1",
"react-addons-shallow-compare": "^15.2.1",
"react-dom": "^15.2.1",
"react-loader": "^2.0.0",
"react-relay": "^0.9.2",
"react-router": "1.0.0-rc3",
"react-router-relay": "^0.7.0",
"superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-eslint": "^6.1.2",
"babel-jest": "^13.2.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-relay-plugin": "^0.9.2",
"jest-cli": "^12.1.1",
"react-addons-test-utils": "^15.2.1",
"webpack": "^1.13.1"
},
I haven't been able to update react-router and relay as of yet as it introduced many breaking changes, which I haven't been able to address completely and I'm asking about this in a different question.
Any help on the this issue would be greatly appreciated. Thanks!