Well, I have this warning in the browser console:
[Vue warn]: `beforeDestroy` has been renamed to `beforeUnmount`.
at
This is weird, because I have not beforeDestroy anywhere and I have the latest versions of the packages in my package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"moment": "^2.29.1",
"quill": "^1.3.7",
"register-service-worker": "^1.7.1",
"socket.io-client": "^3.1.0",
"three": "^0.123.0",
"uuid": "^3.4.0",
"v-calendar": "^3.0.0-alpha.3",
"vue": "^3.0.5",
"vue-dk-toast": "^1.3.3",
"vue-material-design-icons": "^4.11.0",
"vue-router": "^4.0.4",
"vue-socket.io": "^3.0.10",
"vue-uuid": "^2.0.2",
"vue3-carousel": "^0.1.11",
"vue3-quill": "^0.2.1",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#babel/core": "^7.12.17",
"#babel/eslint-parser": "^7.12.1",
"#vue/cli-plugin-babel": "^4.5.10",
"#vue/cli-plugin-eslint": "^4.5.10",
"#vue/cli-plugin-pwa": "^4.5.11",
"#vue/cli-plugin-router": "^4.5.11",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "^4.5.11",
"#vue/compiler-sfc": "^3.0.5",
"#vue/eslint-config-airbnb": "^5.0.2",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^7.6.0"
}
What could be wrong? I searched for the same problem but I only found this: https://github.com/ckeditor/ckeditor5/issues/8224 , which doesn't help.
Thanks in advance for your help.
I had a similar problem. I figured its because vue-socket.io is not compatible with Vue3. Below is my solution.
update to vue-3-socket.io, which is a Vue 3 compatibility version of vue-socket.io (though it still not perfectly compatible with Vue3)
then open the file node_modules/vue-3-socket.io/dist/vue-socketio.js
search for beforeDestroy and replace it with beforeUnmount
The fact that you have "all packages at highest version" is very different from "all the packages I'm using are compatible with Vue 3" ....its clear one of the packages is definitely NOT compatible with Vue 3...
Related
I am a beginner in Next.js. In Next.js and Preact based application, after downloading "node_modules" with "npm install --legacy-peer-deps" and running the project with "npm run dev", I am getting errors that I will add below. On the Homepage, I see the text "Internal Server Error".
I tried many versions of "Node.js" with "nvm" as a solution. When I worked on LTS and latest version the project never worked. When I run it on 16.x.x and below, the project works but errors occur.
I couldn't find the cause and solution for this. I hope someone knows the solution.
Errors:
Error: Hook can only be invoked from render methods.
at Object.n.options.__h (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\debug\dist\debug.js:1:6026)
at l (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:175)
at Object.m (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:335)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\#next\react-dev-overlay\lib\internal\ReactDevOverlay.js:87:27)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:71:12) at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
TypeError: Cannot read property 'context' of undefined
at Object.exports.useContext (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:2697)
at useRouter (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\client\router.js:123:27)
at MyApp (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\.next\server\pages\_app.js:91:72)
at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5789:7)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
package.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
"export-s3": "next build && next export '/*'",
"deploy": "next build && next export && firebase deploy",
"openid": "next build && next export && firebase hosting:channel:deploy openid",
"image": "next build && next export && firebase hosting:channel:deploy image",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7-react": "^6.3.17",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
}
package-lock.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"framework7-react": "^6.3.17",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
},
I am not able to use the latest version of Chakra UI with Nextjs.
There is some problem with CommonJS modules and it is preventing execution.
Below you will see the error being returned:
SyntaxError: Named export 'chakra' not found. The requested module '#chakra-ui/system' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '#chakra-ui/system';
package.json:
{
"name": "frontend-admin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest"
},
"dependencies": {
"#chakra-ui/react": "^2.4.9",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#hookform/resolvers": "^2.9.0",
"#testing-library/user-event": "^14.4.3",
"axios": "^0.27.2",
"axios-mock-adapter": "^1.21.2",
"broadcast-channel": "^4.18.1",
"chakra-ui-simple-autocomplete": "^2.2.0",
"date-fns": "^2.28.0",
"framer-motion": "^8.5.0",
"jwt-decode": "^3.1.2",
"next": "12.1.6",
"nookies": "^2.5.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.6.0",
"react-query": "^3.39.1",
"twilio": "^3.78.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#babel/preset-typescript": "^7.18.6",
"#faker-js/faker": "^7.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.2",
"#types/jest": "^29.0.3",
"#types/node": "^18.11.18",
"#types/react": "^18.0.10",
"#types/react-dom": "18.0.6",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^29.0.3",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",
"lint-staged": "^13.0.3",
"prettier": "2.7.1",
"ts-jest": "^29.0.1",
"typescript": "4.8.2"
}
}
Can you help me to solve this problem?
Ignore lorem ipsum
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
I am currently working on a project where we agreed to use Ant Design library with NextJS and TypeScript
When I test locally using npm run dev everything looks alright, but on npm run build and npm run start the css looks a complete mess.
I tried overriding Ant Design default css using the !important property on various of different classes but I don't think that's a very good approach. Has anyone ever encountered such a problem before?
Here is the package.json file if that's relevant
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src --ext js,ts,tsx",
"test": "jest --config ./configs/jest.config.js",
"prepare": "husky install"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.18.6",
"axios": "^0.25.0",
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/node": "17.0.12",
"#types/react": "17.0.38",
"babel-jest": "^27.4.6",
"concurrently": "^7.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"jest": "^27.4.7",
"jest-css-modules": "^2.1.0",
"pretty-quick": "^3.1.3",
"typescript": "^4.5.5"
}
}
I am building a nuxt ssr app and whenever I run build command, I get this error of css-loader related to Invalid options object.
ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue)
Module build failed (from ./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }
at validate (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\dist\index.js:36:28)
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/vue-style-loader!./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue) 4:14-295
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue
# ./node_modules/vue2-google-maps/dist/main.js
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/GoogleMap.vue
# ./components/GoogleMap.vue
# ./components/AddPost.vue
# ./components/Header.vue
# ./layouts/nossr.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/client.js
I have install the css-loader as well but the issue persists. Below is my package.json
{
"name": "test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
"test": "jest"
},
"dependencies": {
"#azure/storage-blob": "12.6.0",
"#capacitor-community/http": "1.0.0",
"#capacitor/android": "2.4.6",
"#capacitor/core": "2.4.6",
"#ffmpeg-installer/ffmpeg": "1.1.0",
"#fortawesome/fontawesome-svg-core": "1.2.28",
"#fortawesome/free-brands-svg-icons": "5.13.0",
"#fortawesome/free-solid-svg-icons": "5.13.0",
"#fortawesome/vue-fontawesome": "0.1.10",
"#mathieustan/vue-datepicker": "^0.2.11",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/svg": "^0.4.0",
"#vue-stripe/vue-stripe": "4.1.1",
"axios": "^0.24.0",
"azure-storage": "^2.10.4",
"capacitor-resources": "2.0.5",
"cordova-res": "0.15.3",
"core-js": "^3.15.1",
"cors": "2.8.5",
"cropperjs": "1.5.9",
"crypto-js": "4.0.0",
"css-loader": "5.0.0",
"debounce": "1.2.0",
"fluent-ffmpeg": "2.1.2",
"jquery": "1.9.1",
"lodash": "4.17.21",
"lru-cache": "6.0.0",
"luxon": "1.25.0",
"masonry-layout": "4.2.2",
"moment": "^2.9.0",
"moment-timezone": "^0.5.33",
"number-abbreviate": "^2.0.0",
"nuxt": "^2.15.7",
"photoswipe": "^5.2.4",
"postcss": "8.1.10",
"postcss-import": "13.0.0",
"postcss-loader": "4.1.0",
"postcss-url": "10.1.1",
"push-dir": "^0.4.1",
"rxjs": "6.6.3",
"simple-vue-validator": "0.16.0",
"style-loader": "^3.3.1",
"stylus-loader": "^6.2.0",
"underscore": "^1.13.1",
"v-datatable-light": "0.8.2",
"v-lazy-image": "1.4.0",
"video-metadata-thumbnails": "1.0.22",
"vue-datatables-net": "1.4.1",
"vue-datetime": "1.0.0-beta.13",
"vue-loader": "14.2.4",
"vue-meta": "2.4.0",
"vue-quill-editor": "3.0.6",
"vue-router": "3.3.4",
"vue-rx": "6.2.0",
"vue-scroll": "^2.1.13",
"vue-select": "^3.10.3",
"vue-svg-loader": "^0.16.0",
"vue-tables-2": "^2.3.1",
"vue-the-mask": "^0.11.1",
"vue-tippy": "^4.7.2",
"vue-toast-notification": "0.4.1",
"vue2-datepicker": "3.8.2",
"vue2-google-maps": "0.10.7",
"vue2-timepicker": "^1.1.6",
"vuejs-clipper": "3.0.3",
"vuejs-datepicker": "1.6.2",
"vuetable-2": "2.0.0-beta.4",
"vuex": "3.4.0",
"vuex-persistedstate": "3.0.1",
"weekstart": "1.0.1"
},
"devDependencies": {
"#capacitor/cli": "2.4.6",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "^27.0.5",
"eslint": "6.7.2",
"jest": "^27.0.5",
"sass": "^1.50.1",
"sass-loader": "^10.2.1",
"source-map-loader": "^3.0.0",
"vue-jest": "^3.0.4",
"vue-masonry-css": "1.0.3"
},
"main": "index.js",
"license": "MIT"
}
I have searched alot but couldn't find any solution. kindly help me out. Thanks in advance!
This question is not really solvable without having the whole context and making an in-depth analysis of all the packages one by one: upgrading the legacy ones, removing the deprecated ones and figuring out what kind of specific configuration is in place (Stylus for example).
The given reproduction kinda shows the issue, but we cannot just solve them in package.json because it may break the logic that is based on those specific versions.
Since the project is private, there is no real way to help here without having more info.
Error! You've attempted to require #react-native-firebase/auth version '6.2.0', however, the #react-native-firebase/app module is of a different version (6.3.4).
I get this error whenever I launch the app. I've tried to reinstall all the modules, to delete and reinstall, to install all react native firebase modules to version 6.3.4, to version 6.2.0 but still nothing.
I can't use the firebase package because I've implemented firebase differently.
Do you have any idea what should I do?
Package.json:
"name": "Vanto",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-firebase/app": "^6.2.0",
"#react-native-firebase/auth": "^6.2.0",
"#react-native-firebase/storage": "^6.2.0",
"#types/react": "^16.9.17",
"#types/react-native": "^0.60.31",
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-admob": "^2.0.0-beta.6",
"react-native-appearance": "^0.3.1",
"react-native-gesture-handler": "^1.5.3",
"react-native-image-picker": "^2.3.0",
"react-native-ionicons": "^4.6.4",
"react-native-navigation-bar-color": "^1.0.0",
"react-native-reanimated": "^1.4.0",
"react-native-restart": "0.0.14",
"react-native-splash-screen": "^3.2.0",
"react-native-typescript-transformer": "^1.2.13",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",
"styled-components": "^5.0.1",
"typescript": "^3.7.5",
"uninstall": "0.0.0"
},
"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"
}
}
Fixed by cleaning node cache and yarn cache as well as reinstalling react native firebase modules all in 6.2.0