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 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";
Environment
I am making a website with some administration/hidden for regular user functionality. The application has internationalization. Main stack:
Next
next-i18next
NX
Packages
{
"name": "client",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"serve": "nx serve",
"serve:prod": "nx serve --prod",
"build": "nx build",
"test": "nx test",
"eslint": "eslint --cache",
"prettier": "prettier --check --cache",
"lint": "nx lint",
"format": "nx format:check",
"e2e": "nx e2e",
"affected:e2e": "nx affected --target=e2e",
"affected:lint": "nx affected --target=lint",
"affected:format": "nx affected --target=format",
"affected:test": "nx affected --target=test",
"storybook": "nx storybook",
"storybook:build": "nx build-storybook",
"deploy": "vercel",
"deploy:prod": "vercel --prod",
"prepare": "husky install"
},
"private": true,
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#fontsource/roboto": "^4.5.7",
"#mui/base": "^5.0.0-alpha.91",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.2",
"#reduxjs/toolkit": "^1.8.3",
"axios": "^0.27.2",
"formik": "^2.2.9",
"next": "^12.2.3",
"next-i18next": "^11.0.0",
"next-redux-wrapper": "^7.0.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-redux": "^8.0.2",
"vercel": "^27.1.3",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "7.12.13",
"#babel/preset-typescript": "7.12.13",
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#next/bundle-analyzer": "^12.2.3",
"#nrwl/cli": "14.4.2",
"#nrwl/cypress": "14.5.1",
"#nrwl/eslint-plugin-nx": "14.4.3",
"#nrwl/express": "^14.4.3",
"#nrwl/jest": "14.5.1",
"#nrwl/linter": "14.4.2",
"#nrwl/next": "14.4.0",
"#nrwl/node": "14.4.0",
"#nrwl/react": "14.4.2",
"#nrwl/storybook": "14.4.2",
"#nrwl/web": "14.4.3",
"#nrwl/workspace": "14.4.2",
"#storybook/addon-essentials": "~6.5.9",
"#storybook/builder-webpack5": "~6.5.9",
"#storybook/core-server": "~6.5.9",
"#storybook/manager-webpack5": "~6.5.9",
"#storybook/react": "~6.5.9",
"#svgr/webpack": "^5.4.0",
"#testing-library/cypress": "^8.0.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "13.3.0",
"#types/express": "4.17.13",
"#types/jest": "27.4.1",
"#types/node": "18.0.4",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.5",
"#typescript-eslint/eslint-plugin": "^5.30.3",
"#typescript-eslint/parser": "^5.30.3",
"babel-jest": "27.5.1",
"babel-loader": "8.1.0",
"core-js": "^3.6.5",
"cypress": "^10.3.0",
"cypress-real-events": "^1.7.1",
"cypress-web-vitals": "^2.0.0",
"eslint": "8.2.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "12.1.6",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^8.0.1",
"jest": "27.5.1",
"lint-staged": "^13.0.3",
"nx": "14.5.1",
"prettier": "^2.7.1",
"react-test-renderer": "18.2.0",
"regenerator-runtime": "0.13.7",
"ts-jest": "27.1.4",
"ts-node": "~10.8.0",
"tslib": "^2.3.0",
"typescript": "~4.7.2",
"url-loader": "^3.0.0"
}
}
Problem
The problem is that raw locales in the .json format are accessible by GET requests. For example, I can visit http://localhost/locales/en/common.json and get:
{
"email": {
"length": {
"short": "Email is too short",
"long": "Email is too long"
},
"format": "Email format is wrong",
"required": "Email is required"
},
"password": {
"length": {
"short": "Password is too short",
"long": "Password is too long"
},
"format": "Password format is wrong",
"required": "Password is required"
}
}
The locales are not placed in the public directory during development and next-i18next is configured for another locales path by its next-i18next.config.js.
I18n config
const path = require('path');
module.exports = {
debug: process.env.NODE_ENV === 'development',
i18n: {
locales: ['en', 'uk'],
defaultLocale: 'en',
},
localePath: path.resolve('./apps/client/locales'),
};
Question
I think that users can guess these paths and get some sensitive information. Are there any ways to make them accessible only for Next, but not for the public? Maybe I should change my way of localization at all, shouldn't I?
next-translate looks like the library with different internationalization logic, which resolved my problem.
The problem occurs in a React app. When I build it with react-scripts locally, everything is built perfectly and styles are the way they should be. But when the app is built with Docker, the values of some properties in styles are replaced with CSS variables that are not defined. The version of Node.js used for creating the Docker container is exactly the same as on a local machine. Also bootstrap is used in the React app. Previously there wasn't such weird behavior and everything was built perfectly and no changed to styles were made.
Here's package.json:
{
"name": "minible-react",
"version": "1.0.0",
"private": true,
"dependencies": {
"#capaj/react-select-timezone": "^3.0.0",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.0.5",
"#mui/lab": "^5.0.0-alpha.51",
"#mui/material": "^5.0.4",
"#mui/styles": "^5.0.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/date-fns": "^2.6.0",
"#visx/responsive": "^2.1.0",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.3",
"availity-reactstrap-validation": "^2.7.0",
"axios": "^0.21.0",
"bootstrap": "^5.0.0-beta2",
"classnames": "^2.3.1",
"clsx": "^1.1.1",
"date-fns": "^2.23.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"husky": "^7.0.2",
"i18next": "^19.8.4",
"i18next-browser-languagedetector": "^6.0.1",
"leaflet": "^1.7.1",
"lint-staged": "^11.2.3",
"lodash": "^4.17.21",
"lodash.clonedeep": "^4.5.0",
"metismenujs": "^1.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.0.0",
"prop-types": "^15.7.2",
"qs": "^6.11.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap-sweetalert": "^5.2.0",
"react-color": "^2.19.3",
"react-countup": "^4.3.3",
"react-csv": "^2.0.3",
"react-date-range": "^1.3.0",
"react-datepicker": "^3.8.0",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.5",
"react-icons": "^4.4.0",
"react-infinite-scroll-component": "^6.1.0",
"react-input-mask": "^2.0.4",
"react-modal": "^3.14.4",
"react-moment": "^1.1.1",
"react-phone-input-2": "^2.14.0",
"react-places-autocomplete": "^7.3.0",
"react-redux": "^7.2.2",
"react-redux-toastr": "7.5.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-select": "^3.2.0",
"react-select-async-paginate": "^0.6.0",
"react-slider-modal": "^1.3.1",
"react-slideshow-image": "^3.6.0",
"react-table": "^7.7.0",
"react-times": "^3.1.12",
"react-timezone-select": "^1.0.2",
"react-toastr": "^3.0.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^8.9.0",
"recharts": "^2.1.0",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"save-dev": "0.0.1-security",
"simplebar-react": "^2.3.0",
"toastr": "^2.1.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#iconify-icons/bi": "^1.1.5",
"#iconify/react": "^1.1.4",
"#visx/mock-data": "^2.1.0",
"animation.css": "^0.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.26.1",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"redux-devtools": "^3.7.0"
}
}
Styles of component after local build
Styles of component after Docker build (all those variables are not defined)
I'll appreciate any ideas why it may be happening and how I could solve it.
Ive had the same issue and this solution working for me: unistall the node and Install it again.
this is error
And this is my package.json
{
"name": "myproject",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.17.7",
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/material-bottom-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"#reduxjs/toolkit": "^1.8.3",
"expo": "~44.0.0",
"expo-auth-session": "^3.6.1",
"expo-av": "^11.2.3",
"expo-checkbox": "^2.1.0",
"expo-downloads-manager": "^1.0.2",
"expo-facebook": "^12.2.0",
"expo-file-system": "^14.0.0",
"expo-image-picker": "^13.1.1",
"expo-media-library": "^14.1.0",
"expo-random": "^12.2.0",
"expo-screen-orientation": "^4.2.0",
"expo-sharing": "^10.2.0",
"expo-status-bar": "~1.2.0",
"expo-video-player": "^2.0.4",
"expo-web-browser": "^10.2.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-animatable": "^1.3.3",
"react-native-background-downloader": "^2.3.4",
"react-native-elements": "^3.4.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-gesture-handler": "^2.1.0",
"react-native-icon-badge": "^1.1.3",
"react-native-paper": "^4.12.1",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "^2.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.13.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-web": "0.17.1",
"react-redux": "^8.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}