My site is not mobile friendly when testing with Google Mobile friendly. But actually when accessing it, it is mobile friendly.
What should I do to fix it? I am using Next.js.
Result when I test: https://search.google.com/test/mobile-friendly/result?id=zwleJJ0VXRiIwFagHtBHuA
My package.json:
{
"name": "tintuc",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start -p 8080",
"sitemap": "next-sitemap",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
"find:unused": "next-unused",
"depcheck": "npx depcheck"
},
"dependencies": {
"#apollo/client": "^3.3.19",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"date-fns": "^2.25.0",
"deepmerge": "^4.2.2",
"graphql": "^15.5.0",
"highlight.js": "^11.6.0",
"html-react-parser": "^3.0.4",
"lodash": "^4.17.21",
"next": "^12.2.5",
"next-seo": "^4.28.1",
"node-html-parser": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading-skeleton": "^2.2.0",
"replace-special-characters": "^1.2.6"
},
"devDependencies": {
"#next/bundle-analyzer": "^11.1.4",
"#types/node": "^18.11.0",
"#types/react": "^18.0.21",
"autoprefixer": "^10.3.6",
"next-pwa": "^5.6.0",
"next-sitemap": "^3.1.29",
"next-unused": "^0.0.6",
"postcss": "^8.3.8",
"tailwindcss": "^2.2.16"
}
}
Related
Have not been able to get close to understanding the underlying cause of this issue, but I am trying to implement Clerk Authentication using NextJS 12.2.2 and I have everything working in the dev environment. However when I move into the production environment, my site instantly crashes on load due to the following error:
ReferenceError: __import_unsupported is not defined
at (vc/edge/function:14:2050)
at (vc/edge/function:14:656)
at (vc/edge/function:14:3107)
at (vc/edge/function:14:656)
at (vc/edge/function:67:13871)
at (vc/edge/function:14:656)
at (vc/edge/function:67:15731)
at (vc/edge/function:14:656)
at (vc/edge/function:67:27265)
at (vc/edge/function:14:656)
ReferenceError: __import_unsupported is not defined
at (external root " __import_unsupported('buffer')":1:0)
at (webpack/bootstrap:21:0)
at (node_modules/rfc4648/lib/index.mjs:11:15)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/dist/server/clerk.js:5:18)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/dist/server/index.js:4:21)
at (webpack/bootstrap:21:0)
at (node_modules/#clerk/nextjs/server.js:1:0)
at (webpack/bootstrap:21:0)
My Clerk middleware.js file:
import { withClerkMiddleware } from "#clerk/nextjs/server";
import { NextResponse } from "next/server";
export default withClerkMiddleware((req) => {
return NextResponse.next();
});
My package.json
{
"name": "generic_auth",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
},
"dependencies": {
"#clerk/nextjs": "^4.8.2",
"#clerk/themes": "^1.2.41",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#next-auth/prisma-adapter": "^0.5.2-next.19",
"#prisma/client": "^3.11.1",
"#react-google-maps/api": "^2.7.0",
"#stripe/stripe-js": "^1.26.0",
"#vercel/analytics": "^0.1.7",
"aws-sdk": "^2.1105.0",
"cross-env": "^7.0.3",
"fs": "^0.0.1-security",
"global": "^4.4.0",
"graphql": "^16.3.0",
"image-size": "^1.0.1",
"material-ui-icons": "^1.0.0-beta.36",
"micro": "^9.3.4",
"moment": "^2.29.2",
"next": "12.2.2",
"next-auth": "^4.10.3",
"next-stripe": "^1.0.0-beta.1",
"nodemailer": "^6.7.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-places-autocomplete": "^7.3.0",
"react-query": "^3.34.19",
"sass": "^1.49.9",
"sharp": "^0.30.3",
"stripe": "^8.215.0",
"underscore": "^1.13.6",
"vercel": "^24.0.1"
},
"devDependencies": {
"#types/node": "17.0.23",
"#types/react": "17.0.43",
"#types/react-dom": "17.0.14",
"eslint": "8.12.0",
"eslint-config-next": "12.1.2",
"prisma": "^3.11.1",
"typescript": "4.6.3"
}
}
Anyone have any idea on this? Happy to provide any other info required to debug this but dont want to overload the original post with too much info. Thanks!
Updating from Next 12.2.2 -> 12.2.6 resolved this issue for me. Seems that there is a problem with Middleware in 12.2.2 that has since been resolved.
To be clear, along with updating Next, I also updated react and react-dom, as well as removed unused Next-Auth packages from my previous Auth implementation. Update package.json is as follows:
{
"name": "generic_auth",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
},
"dependencies": {
"#clerk/nextjs": "^4.8.2",
"#clerk/themes": "^1.2.41",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#prisma/client": "^3.11.1",
"#react-google-maps/api": "^2.7.0",
"#stripe/stripe-js": "^1.26.0",
"#vercel/analytics": "^0.1.7",
"aws-sdk": "^2.1105.0",
"cross-env": "^7.0.3",
"fs": "^0.0.1-security",
"global": "^4.4.0",
"graphql": "^16.3.0",
"image-size": "^1.0.1",
"material-ui-icons": "^1.0.0-beta.36",
"micro": "^9.3.4",
"moment": "^2.29.2",
"next": "12.2.6",
"next-stripe": "^1.0.0-beta.1",
"nodemailer": "^6.7.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-places-autocomplete": "^7.3.0",
"react-query": "^3.34.19",
"sass": "^1.49.9",
"sharp": "^0.30.3",
"stripe": "^8.215.0",
"underscore": "^1.13.6",
"vercel": "^24.0.1"
},
"devDependencies": {
"#types/node": "17.0.23",
"#types/react": "17.0.43",
"#types/react-dom": "17.0.14",
"eslint": "8.12.0",
"eslint-config-next": "12.1.2",
"prisma": "^3.11.1",
"typescript": "4.6.3"
}
}
For anyone looking into an Auth choice, seriously take a look at Clerk! I was able to chat with one of their devs over live chat on their site for the past hour to debug this, and they were extremely helpful. On top of that, Clerk has easily been one of the easiest experiences I have had and has taken a lot of the stress of Auth out of the picture for me, allowing me to focus on implementing my site.
I am defined the functional properties in model like this:
export interface IIapProductProps {
iapproducts: IIapProductState,
dispatch: Dispatch
loading: boolean
}
and this is the model:
interface IIapProductModel {
namespace: 'iapproduct'
state: IIapProductState
reducers: {
getPage: Reducer<IIapProductState>,
getList: Reducer<IIapProductState>,
edit:Reducer<IIapProductState>,
add: Reducer<IIapProductState>,
}
effects: {
getIapProductPage: Effect,
getProductList: Effect,
editProduct: Effect,
addProduct: Effect
}
subscriptions: {
setup: Subscription
}
}
does the IIapProductProps first parameter name must be the same with the namespace's name? I found when I changed the namespace to iapproduct, the properties iapproducts must be the same with the model namespace. this is the package.json:
{
"name": "ant-design-pro",
"version": "5.2.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build",
"build": "umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "umi g tmp",
"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"openapi": "umi openapi",
"playwright": "playwright install && playwright test",
"precommit": "lint-staged",
"prettier": "prettier -c --write \"src/**/*\"",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev umi dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
"start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:e2e": "node ./tests/run-tests.js",
"tsc": "tsc --noEmit"
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#ant-design/pro-components": "^1.1.14",
"#ant-design/pro-descriptions": "^1.10.0",
"#ant-design/pro-form": "^1.52.0",
"#ant-design/pro-layout": "^6.32.0",
"#ant-design/pro-table": "2.72.1",
"#loadable/component": "^5.15.2",
"#types/crypto-js": "^4.1.1",
"#types/react-loadable": "^5.5.6",
"#umijs/route-utils": "^2.0.0",
"antd": "^4.17.0",
"classnames": "^2.3.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.1",
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
"lodash": "^4.17.0",
"moment": "^2.29.0",
"omit.js": "^2.0.2",
"rc-menu": "^9.1.0",
"rc-util": "^5.16.0",
"react": "^17.0.0",
"react-dev-inspector": "^1.7.0",
"react-dom": "^17.0.0",
"react-helmet-async": "^1.2.0",
"react-loadable": "^5.5.0",
"react-native-aes-crypto": "^2.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"umi": "3.5.0",
"umi-request": "^1.4.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"#ant-design/pro-cli": "^2.1.0",
"#playwright/test": "^1.17.0",
"#types/express": "^4.17.0",
"#types/history": "^4.7.0",
"#types/jest": "^26.0.0",
"#types/lodash": "^4.14.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-helmet": "^6.1.0",
"#types/react-router": "^5.1.18",
"#types/react-router-dom": "^5.3.3",
"#umijs/fabric": "^2.8.0",
"#umijs/openapi": "^1.3.0",
"#umijs/plugin-blocks": "^2.2.0",
"#umijs/plugin-esbuild": "^1.4.0",
"#umijs/plugin-openapi": "^1.3.0",
"#umijs/preset-ant-design-pro": "^1.3.0",
"#umijs/preset-dumi": "^1.1.0",
"#umijs/preset-react": "^1.8.17",
"#umijs/yorkie": "^2.0.5",
"carlo": "^0.9.46",
"cross-env": "^7.0.0",
"cross-port-killer": "^1.3.0",
"detect-installer": "^1.0.0",
"enzyme": "^3.11.0",
"eslint": "^7.32.0",
"express": "^4.17.0",
"gh-pages": "^3.2.0",
"jsdom-global": "^3.0.0",
"lint-staged": "^10.0.0",
"mockjs": "^1.1.0",
"prettier": "^2.5.0",
"puppeteer-core": "^8.0.0",
"stylelint": "^13.0.0",
"swagger-ui-react": "^4.12.0",
"typescript": "^4.5.0",
"umi-serve": "^1.9.10"
},
"engines": {
"node": ">=10.0.0"
},
"gitHooks": {
"commit-msg": "fabric verify-commit"
}
}
Did upgrade the nextjs version 12 to #latest, post that facing the error, while running dev server:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './cjs/react.development' is not defined by "exports" in /home/oem/Desktop/cld-frontend/cld-frontend/node_modules/react/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:453:9)
at packageExportsResolve (node:internal/modules/esm/resolve:729:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.mod._resolveFilename (/home/oem/Desktop/cld-frontend/cld-frontend/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED',
page: '/colleges/[collegeUriSlug]'
}
old dependencies:
{
"name": "cld-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i": "^0.3.7",
"mongodb": "^4.10.0",
"next": "^12.1.0",
"npm": "^8.12.2",
"react": "17.0.2",
"react-device-detect": "^2.2.2",
"react-dom": "17.0.2",
"react-horizontal-scrolling-menu": "^2.7.1",
"react-multi-carousel": "^2.8.0",
"react-select": "^5.4.0",
"sharp": "^0.30.5"
},
"devDependencies": {
"#svgr/webpack": "^6.2.1",
"eslint": "8.9.0",
"eslint-config-next": "12.1.0"
}
}
new dependencies after upgrading:
{
"name": "cld-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i": "^0.3.7",
"mongodb": "^4.10.0",
"next": "^13.0.5",
"npm": "^8.12.2",
"react": "18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "18.2.0",
"react-horizontal-scrolling-menu": "^2.7.1",
"react-multi-carousel": "^2.8.0",
"react-select": "^5.4.0",
"sharp": "^0.30.5"
},
"devDependencies": {
"#svgr/webpack": "^6.2.1",
"eslint": "8.9.0",
"eslint-config-next": "13.0.5"
}
}
did try some of the methods, available on internet:
yarn upgrade
deleting node_modules and package.lock.json and reinstalling dependencies
npm update and npm audit fix --force
all these methods didn't worked for me,s till facing the issue, unable to access the website.
Sidebar.js
SidebarLink.js
package.json
{
"name": "twitter-clone",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#heroicons/react": "^1.0.5",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.5",
"#mui/material": "^5.2.7",
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"eslint": "8.6.0",
"eslint-config-next": "12.0.7",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.12"
}
}
I am unable to find where I have mistaken, not a single icon is showing in output.
I deployed a next.js application to the App Engine Standard and I get 500 error. In StackDriver the error is "/bin/sh: 1: server.js: not found"
but server.js exists in the app:
I'm serving up my project on port 3000
Package.json is like this:
{
"name": "supplychain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "node server.js",
"start": "NODE_ENV=production server.js",
"transpile": "babel src -d dist --copy-files",
"prepublishOnly": "npm run transpile",
"build": "next build",
"deploy": "gh-pages -d examples/dist",
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.2.5",
"fs-extra": "^7.0.1",
"ganache-cli": "^6.4.1",
"mocha": "^5.2.0",
"next": "^4.1.1",
"next-routes": "^1.4.2",
"radium": "^0.25.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-react": "^0.82.5",
"solc": "^0.4.25",
"truffle-hdwallet-provider": "0.0.3",
"web3": "^1.0.0-beta.35"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"npm-install-webpack-plugin": "^4.0.5",
"terser-webpack-plugin": "^1.3.0",
"uglifyjs-webpack-plugin": "v1.0.0-beta.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.2"
}
}
and app.yaml is like:
# [START app_yaml]
runtime: nodejs8
# [END app_yaml]
Can somebody help me find the problem?
Change this line:
"start": "NODE_ENV=production server.js",
To:
"start": "NODE_ENV=production node server.js",