Develop Reference

These dependencies ware not found in vuejs

These dependencies were not found:
* -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/vuetify/Vuetify.vue?vue&type=style&index=0&lang=scss&
* vuetify/lib/framework in ./src/core/plugins/vuetify.js
To install them, you can run: npm install --save -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css vuetify/lib/framework
this my package.js file
{
"name": "metronic-vue-demo1",
"version": "7.2.8",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"rtl": "webpack --config webpack-rtl.config.js"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#fortawesome/fontawesome-free": "^5.13.0",
"#mdi/font": "^3.6.95",
"#popperjs/core": "^2.4.0",
"#riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.18.1",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.13.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"deepmerge": "^4.2.2",
"highlight.js": "^9.18.1",
"line-awesome": "^1.3.0",
"moment": "^2.29.1",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.5.0",
"portal-vue": "^2.1.7",
"roboto-fontface": "*",
"socicon": "^3.0.5",
"sweetalert2": "^9.10.12",
"tooltip.js": "^1.3.2",
"v-toaster": "^1.0.3",
"vee-validate": "^3.4.9",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-axios": "^2.1.4",
"vue-cropperjs": "^4.1.0",
"vue-good-table": "^2.21.10",
"vue-highlight.js": "^3.1.0",
"vue-i18n": "^8.17.4",
"vue-inline-svg": "^1.3.0",
"vue-router": "^3.1.5",
"vue-sweetalert2": "^4.3.1",
"vue2-perfect-scrollbar": "^1.5.0",
"vuelidate": "^0.7.5",
"vuex": "^3.3.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.9",
"#vue/cli-plugin-eslint": "^4.5.9",
"#vue/cli-service": "^4.5.9",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack-cli": "^3.3.11",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-unused-vars": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
how to solve this?

For me solve this
npm install vuetify-loader -D
npm cache clean --force
npm install vuetify

NextJS on GAE - Error: EROFS: read-only file system

I'm trying to deploy a Next application with custom server.js into GAE. I can run the project with no problems on local and even on the google GCP CLI. The problem right now is after the app is deployed to GAE successfully via gcloud app deploy, I'm getting the following error when opening the app.
2020-03-30 21:41:21.748 HKT
Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'
Expand all | Collapse all{
insertId: "5e81f701000b6ba4e770be02"
labels: {…}
logName: "projects/next-gae/logs/stderr"
receiveTimestamp: "2020-03-30T13:41:21.749839891Z"
resource: {…}
textPayload: "Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'"
timestamp: "2020-03-30T13:41:21.748452Z"
}
My app.yaml is below:
runtime: nodejs10
.gcloudignore
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
*.hot-update.js*
# Other config and Files
README.md
.eslintignore
.eslintrc
package.json
{
"name": "next-gae",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.3",
"#babel/runtime": "^7.8.7",
"#sentry/browser": "^5.15.0",
"#sentry/integrations": "^5.15.0",
"#sentry/node": "^5.15.0",
"#storybook/addon-actions": "^5.2.6",
"#storybook/addon-info": "^5.2.6",
"#storybook/addon-knobs": "^5.2.6",
"#storybook/addon-links": "^5.2.6",
"#storybook/addon-notes": "^5.2.6",
"#storybook/addon-storysource": "^5.2.6",
"#storybook/addon-viewport": "^5.2.6",
"#storybook/react": "^5.2.6",
"antd": "^3.26.7",
"axios": "^0.19.0",
"connected-react-router": "^6.5.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"date-fns": "^2.9.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"firebase": "^7.8.0",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.3.0",
"formik": "^2.1.4",
"helmet": "^3.21.2",
"hpp": "^0.2.3",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.1.0",
"immutable": "^4.0.0-rc.12",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"morgan": "^1.9.1",
"next": "^9.1.7",
"next-antd-aza-less": "^1.0.2",
"next-optimized-images": "^2.5.5",
"next-redux-wrapper": "^4.0.1",
"nocache": "^2.1.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-smooth-scrollbar": "^8.0.6",
"react-stripe-elements": "^6.0.1",
"react-virtualized": "^9.21.2",
"redux": "^4.0.4",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-multi": "^0.1.12",
"redux-observable": "^1.2.0",
"redux-persist": "^6.0.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"smooth-scrollbar": "^8.5.1",
"storybook-addon-figma": "^0.1.0",
"storybook-readme": "^5.0.8",
"styled-components": "^5.0.0",
"xss-clean": "^0.1.1",
"yup": "^0.28.2"
},
"engines": {
"node": "10"
},
"scripts": {
"test": "jest",
"flow": "flow",
"eslint": "eslint \"./**/*.{jsx,js}\"",
"lint": "eslint ./src/",
"lint:fix": "npm run lint --fix",
"lint:dry": "npm run lint --fix-dry-run",
"build-next": "next build \"src/app/\"",
"clean": "rimraf dist",
"predeploy": "npm run build-all",
"start": "cd \"src/app/\" ; NODE_ENV=production node server.js",
"deploy:gae": "npm run pre-start; npm run build-next; gcloud app deploy",
"fmt": "prettier --config .prettierrc.yml --write \"{!(node_modules),!(__mock__)/**/}*.{jsx,js,json,md,ts}\""
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{jsx,js}": [
"flow focus-check",
"npm run lint:fix",
"git add"
],
"*.{jsx,js,json,md,ts}": [
"npm run fmt",
"git add"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-flowtype": "^4.4.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"firebase-functions-test": "^0.2.0",
"firebase-tools": "^7.15.1",
"flow-bin": "^0.111.3",
"husky": "^3.1.0",
"jest": "^24.8.0",
"lint-staged": "^9.4.2",
"nodemon": "^2.0.2",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"webpack": "^4.42.0"
}
}

The error you are getting is telling you that the path you are trying to delete from is read only. In GAE standard the paths you can write to are limited:
Java 8, Java 11, Node.js, Python 3.7, PHP 7.2, PHP 7.3, Ruby 2.5
(beta), Go 1.11, Go 1.12, and Go 1.13 have read and write access to
the /tmp directory.
You should handle your files in the /tmp directory or use App Engine Flex if you cannot do so.

undefined is not an object (evaluating 'Component.propTypes') - React Native 0.61.5

I have upgraded the existing react native project from react native 0.59.6 to 0.61.5.
react-native upgrade command not working. So I have done the manual upgrade using upgrade helper. Resolved some post issues. Now project build success.
But After rendering into the ios emulator from Xcode, it is giving the following error.
I am not using Component.propTypes anywhere. package.lock.json have some packages with prop-types. I am not sure what it is doing exactly. Otherwise, inside my project, I am not using
prop-types also. Please find my package.lock.json below,
package.lock.json
...
...
...
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
....
"react": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
"integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
....
package.json
{
"name": "wasfat",
"version": "1.0.3",
"private": true,
"rnpm": {
"assets": [
"app/assets/fonts/corbel"
]
},
"scripts": {
"prepare-repository": "npm i -g react-native-cli yarn;yarn install; react- native link",
"emulator": "emulator -avd Nexus5V6L23_x86_64 -scale 1.0",
"clean": "watchman watch-del-all && npm cache clean && cd android && ./gradlew clean && cd ..",
"test": "jest",
"postinstall": "rm -rf node_modules/react-native-twitter-signin/node_modules",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"lint": "eslint ."
},
"dependencies": {
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "^0.61.5",
"react-native-actionsheet": "^2.4.2",
"react-native-android-keyboard-adjust": "^1.2.0",
"react-native-aws3": "0.0.8",
"react-native-deep-linking": "^2.2.0",
"react-native-device-info": "^5.3.1",
"react-native-double-tap": "^1.0.1",
"react-native-drawer": "^2.5.1",
"react-native-elements": "^1.0.0",
"react-native-exception-handler": "^2.10.8",
"react-native-fbsdk": "^1.1.0",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-signin": "^1.2.3",
"react-native-hide-with-keyboard": "^1.2.0",
"react-native-image-crop-picker": "^0.25.3",
"react-native-image-picker": "^0.28.1",
"react-native-image-slider": "^2.0.3",
"react-native-image-view": "^2.1.5",
"react-native-keyboard-avoiding-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-keyboard-aware-view": "0.0.14",
"react-native-keyboard-listener": "^1.1.0",
"react-native-modal": "^11.1.0",
"react-native-paper": "^2.15.0",
"react-native-picker-select": "^6.2.0",
"react-native-popup-menu": "^0.15.6",
"react-native-progress": "^3.6.0",
"react-native-read-more-text": "^1.1.0",
"react-native-responsive-image": "^2.3.1",
"react-native-responsive-screen": "^1.2.1",
"react-native-s3-upload": "0.0.12",
"react-native-share": "^1.2.1",
"react-native-side-drawer": "^1.1.9",
"react-native-side-menu": "^1.1.3",
"react-native-simple-toast": "0.0.8",
"react-native-snap-carousel": "^3.8.0",
"react-native-swiper-flatlist": "^1.0.10",
"react-native-twitter-signin": "^1.1.1",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.4",
"react-native-video-controls": "^2.2.3",
"react-native-video-player": "^0.10.0",
"react-native-view-more-text": "^2.1.0",
"react-navigation": "^3.3.0",
"react-redux": "^7.1.0",
"react-spinkit": "^3.0.0",
"redux": "^4.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I have found this https://reactjs.org/warnings/dont-call-proptypes.html regarding this issue. But I am not sure how to use it. Because according to this. some third party libraries using propTypes directly. But how to handle it?
There is no help in 0.61 version Github issues. Please suggest some workarounds for this issue.
Thanks for any help.

Material UI Picker - date-fns issue

I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work.
Here is the online example from Material UI.
https://codesandbox.io/s/52p74362pl
The error that i am getting is:
index.js:1446 ../node_modules/#date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\#date-io\date-fns\build'`
here are my package.json files
{
"name": "IFS.CDE.Web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.7.1",
"#material-ui/icons": "^3.0.1",
"ajv": "^6.5.2",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"connected-react-router": "6.1.0",
"date-fns": "^1.30.1",
"downshift": "^2.0.10",
"extract-svg-path": "^2.1.0",
"file-saver": "^1.3.8",
"install": "^0.12.1",
"lodash": "^4.17.10",
"material-ui-datetimepicker": "^1.0.7",
"material-ui-image": "^3.0.3",
"material-ui-pickers": "^2.1.1",
"moment": "^2.23.0",
"npm": "^6.5.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.6.2",
"rc-progress": "^2.2.6",
"react": "^16.6.3",
"react-autosuggest": "^9.3.4",
"react-bingmaps": "^3.6.1",
"react-color": "^2.14.1",
"react-dnd": "^7.0.2",
"react-dom": "^16.6.3",
"react-dropzone": "^4.3.0",
"react-file-viewer": "^0.5.0",
"react-iframe": "^1.2.0",
"react-loadable": "^5.5.0",
"react-popper": "^0.10.1",
"react-redux": "^6.0.0",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.2",
"react-select": "^2.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"rimraf": "^2.6.2",
"typeface-roboto": "^0.0.54",
"uuid": "^3.3.2",
"video-react": "^0.13.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"set-env": "set NODE_ENV=production"
},
"devDependencies": {},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I have installed date-fns but i still get the error.
https://www.npmjs.com/package/date-fns.
I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.
Thanks for the help.

install this(see here):
npm i --save date-fns#next #date-io/date-fns

Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.

Module not found. "#babel/runtime/helpers/builtin/classCallCheck" can't be resolved

I have cloned a repo and did npm i. But as I ran it I was getting the above mentioned error on my console. So I tried a solution from this question and the error disappeared. But now the problem is that my app isn't loading I'm getting a blank page without any errors. I then removed the #babel/runtime dependecy. Here is my package.json:
{
//... some app info
"main": "dist/app.js",
"scripts": {
"clean": "rimraf dist",
"build": "yarn run clean && webpack-dashboard -- webpack --config configs/webpack.config.js --env.build --env.sourceMap",
"dev": "webpack-dashboard -m -- webpack-dev-server --config configs/webpack.config.js --open",
"dev2": "webpack-dashboard -m -- webpack-dev-server --config configs/webpack.config.js --open --env.awesome",
"lint": "tslint --project tsconfig.json",
"tsc": "tsc -p . --noEmit",
"tsc:watch": "tsc -p . --noEmit -w",
"test": "jest --config jest.json",
"test:update": "jest --config jest.json -u",
"reinstall": "rm -rf node_modules && yarn",
"reinstall:win": "rd /s /q node_modules && yarn",
"precommit": "yarn run lint",
"prepush": "yarn run lint & yarn run tsc & yarn run test",
"deploy": "echo 'deploy not set!'"
},
"dependencies": {
"classnames": "^2.2.5",
"csstips": "^0.2.0",
"firebase": "^4.8.0",
"ismobilejs": "^0.4.1",
"material-ui": "^0.19.4",
"numeral": "^2.0.6",
"radium": "^0.19.6",
"react": "16.1.1",
"react-dom": "16.1.1",
"react-firebase-storage-connector": "^1.1.0",
"react-redux": "5.0.6",
"react-stripe-elements": "^1.2.1",
"react-tooltip": "^3.4.0",
"redux": "3.7.2",
"redux-actions": "2.2.1",
"redux-form": "^7.2.0",
"redux-thunk": "^2.2.0",
"tslib": "1.6.1",
"typestyle": "^1.3.2"
},
"devDependencies": {
"#types/radium": "^0.18.23",
"#types/classnames": "^2.2.3",
"#types/firebase": "^2.4.32",
"#types/material-ui": "0.18.3",
"#types/node": "7.0.14",
"#types/react": "16.0.25",
"#types/react-dom": "16.0.3",
"#types/react-hot-loader": "^3.0.0-beta.7",
"#types/react-redux": "5.0.13",
"#types/redux-actions": "2.2.2",
"#types/redux-form": "^7.0.10",
"#types/webpack": "^2.2.15",
"#types/webpack-dev-server": "^1.12.6",
"#types/webpack-env": "^1.13.3",
"awesome-typescript-loader": "^3.4.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.28.0",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.8",
"react-hot-loader": "^3.0.0-beta.6",
"redux-devtools-extension": "^2.13.2",
"rimraf": "^2.6.1",
"style-loader": "^0.19.1",
"ts-jest": "^19.0.14",
"ts-loader": "^2.0.3",
"tslint": "^5.1.0",
"tslint-react": "^3.0.0",
"typescript": "2.6.1",
"url-loader": "^0.6.2",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.9.7"
}
}

Quick fix: npm add #babel/runtime