I am trying to import use Router from next-router, but I am obtaining this error: Module not found: Can't resolve 'next-router'
I have installed last version of next 13.0.6
package.json:
{
"name": "frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 8080",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#apollo/client": "^3.7.1",
"cross-env": "^7.0.3",
"dompurify": "^2.4.1",
"eslint": "8.28.0",
"eslint-config-next": "13.0.6",
"graphql": "^16.6.0",
"lodash": "^4.17.21",
"next": "^13.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-scripts": "^2.1.3",
"sass": "^1.56.1"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^15.0.1",
"postcss-preset-env": "^7.8.3",
"precss": "^2.0.0",
"tailwindcss": "^3.2.4"
}
You should import useRouter from "next/router" not from "next-router".
import { useRouter } from "next/router";
Related
I want to deploy my sveltikit App on Firebase but unable to run build command successfully getting error:
[vite-plugin-sveltekit-setup] ENOTEMPTY: directory not empty, rmdir '\?\C:\Users\User\my-CV.svelte-kit\output\server\chunks'
error during build:
your textpackage.json
{
"name": "my-cv",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
},
"devDependencies": {
"#fontsource/fira-mono": "^4.5.10",
"#neoconfetti/svelte": "^1.0.0",
"#sveltejs/adapter-auto": "^1.0.1",
"#sveltejs/adapter-node": "^1.0.0-next.106",
"#sveltejs/adapter-static": "^1.0.5",
"#sveltejs/kit": "^1.0.0",
"#tsconfig/svelte": "^3.0.0",
"#types/cookie": "^0.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"svelte": "^3.54.0",
"svelte-adapter-firebase": "^0.14.4",
"svelte-check": "^2.10.3",
"svelte-preprocess": "^5.0.0",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.4",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"#rodneylab/svelte-social-icons": "^0.0.24",
"firebase-tools": "^11.21.0"
}
}
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.
And here is my package.json file
{
"name": "ReduxPrj",
"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-community/masked-view": "^0.1.11",
"cli": "^1.0.1",
"react": "17.0.1",
"react-native": "^0.64.1",
"react-native-safe-area-context": "^3.2.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.26.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
You are doing import something from 'redux' where you probably should be doing import { something } from 'redux'
But given that you don't share any code it's difficult to say any more.
My CSS code that I imported into my Vue project and runs in the "npm run serve" section does not work on my server after "npm run build". What could be the reason for this? When I open the index file in the dist file on the local computer, it says CSS is missing, it does not say any error on the server.
main.js
import Vue from 'vue'
import App from './App.vue'
import VRouter from './router'
import VStore from './configurations/storeConfiguration'
import V18n from './configurations/languageConfiguration'
// Special CSS Library ( UA )
import "./assets/scss/ua.css";
The CSS file that appears appears in the development environment. However, it does not appear in the server environment.
package.json
{
"name": "driver",
"version": "0.1.0",
"private": true,
"sideEffects": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/vue-fontawesome": "^2.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"epic-spinners": "^1.1.0",
"node-sass": "^4.14.1",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"scriptjs": "^2.5.9",
"sweet-modal-vue": "^2.0.0",
"v-mask": "^2.2.3",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-ctk-date-time-picker": "^2.5.0",
"vue-i18n": "^8.22.0",
"vue-input-mask": "0.0.11",
"vue-router": "^3.4.7",
"vue-suggestion": "^1.1.0",
"vue-sweetalert2": "^4.0.0",
"vue-the-mask": "^0.11.1",
"vue-toastification": "^1.7.8",
"vuex": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
First things first:
npm run serve does not serve the content of your dist file
Check: How to run production site after build vue cli
Would you mind show some code so we can analyse your problem?