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"
},
Node version : 8.10.0
Since I have updated my code on my WebApp, there is an error with notistack. I found then it could be helpful to upgrade material-ui version, but I cannot actualy. Until I re-build my app, it was working well.
Package.json :
{
"name": "fuse-react-app",
"version": "2.2.4",
"private": true,
"dependencies": {
"#antv/data-set": "^0.10.2",
"#antv/g2": "3.2.2",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#date-io/date-fns": "1.1.0",
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "3.0.2",
"#material-ui/pickers": "^3.2.2",
"#material-ui/styles": "^4.3.0",
"#react-pdf/renderer": "^1.6.10",
"#stripe/stripe-js": "^1.9.0",
"#tinymce/tinymce-react": "^3.2.0",
"auth0-lock": "^11.27.0",
"autosuggest-highlight": "3.1.1",
"axios": "^0.19.0",
"axios-mock-adapter": "1.16.0",
"babel-polyfill": "7.0.0-beta.3",
"base64-img": "^1.0.4",
"bizcharts": "^3.5.5",
"bootstrap": "^4.3.1",
"chart.js": "2.7.3",
"ckeditor5": "^12.2.0",
"classnames": "latest",
"date-fns": "2.0.0-alpha.27",
"downshift": "3.2.6",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"firebase": "5.8.5",
"formsy-react": "1.1.5",
"google-map-react": "1.1.2",""
"install": "^0.13.0",
"invariant": "^2.2.2",
"js-file-download": "^0.4.8",
"js-yaml": "^3.13.1",
"jsonwebtoken": "8.5.0",
"jss-extend": "6.2.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "^4.17.20",
"logrocket": "^1.0.3",
"material-ui-pickers": "2.2.4",
"material-ui-popup-state": "1.2.0",
"mobile-detect": "1.4.3",
"moment": "^2.24.0",
"mui-datatables": "^2.14.0",
"notistack": "^0.9.5",
"path-to-regexp": "3.0.0",
"perfect-scrollbar": "1.4.0",
"prettier": "^1.18.2",
"prismjs": "1.15.0",
"prop-types": "^15.7.2",
"qs": "6.6.0",
"query-string": "^6.11.1",
"raw-loader": "1.0.0",
"react": "16.8.4",
"react-autosuggest": "9.4.3",
"react-beautiful-dnd": "10.0.4",
"react-big-calendar": "0.20.3",
"react-bootstrap": "^1.0.0-beta.12",
"react-chartjs-2": "2.7.4",
"react-color": "^2.17.3",
"react-dom": "16.8.4",
"react-draggable": "3.2.1",
"react-frame-component": "4.1.0",
"react-jss": "8.6.1",
"react-loadable": "5.5.0",
"react-masonry-css": "1.0.12",
"react-number-format": "4.0.6",
"react-popper": "1.0.2",
"react-redux": "6.0.1",
"react-router-config": "4.4.0-beta.6",
"react-router-dom": "4.4.0-beta.6",
"react-scripts": "2.1.5",
"react-select": "^2.4.3",
"react-stripe-elements": "^3.0.0",
"react-swipeable-views": "0.13.1",
"react-table": "6.9.2",
"react-text-mask": "5.4.3",
"react-virtualized": "9.21.0",
"redux": "4.0.1",
"redux-thunk": "2.3.0",
"sweetalert": "^2.1.2",
"tailwindcss": "0.7.4",
"typeface-muli": "0.0.71",
"uuid": "^3.3.3",
"velocity-animate": "^1.5.2",
"velocity-react": "^1.4.1",
"warning": "^3.0.0",
"yarn": "^1.19.1"
},
"resolutions": {
"react": "16.8.4",
"react-dom": "16.8.4"
},
"devDependencies": {
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "7.3.1",
"cross-env": "5.2.0",
"globby": "8.0.2",
"js-beautify": "1.9.0",
"marked": "^0.7.0",
"purgecss": "1.1.0",
"webpack-bundle-analyzer": "^3.3.2"
}, ... }
I build my app, I execute npm start and then have the next error on my webapp :
Uncaught TypeError: Object(...) is not a function
at Object.<anonymous> (notistack.esm.js:414)
Does anyone have an idea of what could cause this error or how could I resolve it ?
Regards,
I am new to MobX with React. So wanted to practice a bit. I created a project with Create React App. I have my package.json as
{
"dependencies": {
"#babel/core": "7.6.0",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"mini-css-extract-plugin": "0.8.0",
"mobx": "^5.15.1",
"mobx-react": "^6.1.4",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"source-map-explorer": "^2.0.1",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.41.0",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.1.1",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"flow-bin": "^0.111.3",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy", { "legacy": true, "decoratorsBeforeExport": false }]
]
}
}
But this is throwing me an error as below
I searched online. Everywhere it is showing to add the above options like legacy, decoratorsBeforeExport, but still no luck. I tried removing all the options, keeping one at a time and the above config also for babel plugins. Still, I am getting this issue.
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.
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