Got 500 error when deploying Next.js to Google Cloud - google-app-engine

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",

Related

Next.js not friendly when checking with google mobile-friendly

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"
}
}

does the interface parameter name must be the same with model namespaces in react

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"
}
}

'ERR_PACKAGE_PATH_NOT_EXPORTED' : after upgrading to latest next JS version

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.

I cannot configure my package.js file for ReactJS

I type "npm start" in command prompt and there is an error
This is the error:
Insufficient number of arguments or no entry found. Alternatively, run
'webpack(-cli) --help' for usage info.
And this is the code in my package.json file:
{
"name": "reactredux",
"version": "1.0.0",
"description": "React",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "webpack -p && copy src/index.html dist/index.html"
},
"keywords": [
"react"
],
"author": "NikolaMilicevic",
"license": "MIT",
"dependencies": {
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.6",
"webpack-dev-server": "^3.10.3"
},
"devDependencies": {
"webpack-cli": "^3.3.11"
}
}

Images loading blurred or not loading - Gatsby and GitHub Pages

I am super new to gatsby and it's been a while since i touched any kind of web development project.
I am trying to create a photography portfolio using this gatsby template
https://github.com/LekoArts/gatsby-starter-portfolio-emilia and my github account (github pages).
The problem is in the main page the image im using as cover picture doesn't load and in the album I'm either getting a blurred version or a weird grayscale version. In development they work just fine.
I'm running on MacOS High Sierra and have tried Firefox, Chrome and Safari. (not sure if relevant)
Here are some dev v. deploy pictures.
I'll post some of the code; but if it's not enough just ask me about something and I'll update the question. I'm really not sure where to begin debugging.
This is my package.json
{
"name": "photos",
"description": "photo portfolio",
"version": "3.0.0",
"author": "Alex Ingberg (hi#alexingberg.com)",
"scripts": {
"develop": "gatsby develop",
"dev": "gatsby develop -o",
"build": "gatsby build",
"serve": "gatsby serve",
"deploy": "gatsby build && gh-pages -d public --branch master",
"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
"lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
"format": "prettier \"**/*.{md,mdx} \" --write",
"lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
"test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
"test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.6.3",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#mdx-js/mdx": "^1.0.10",
"#mdx-js/react": "^1.0.6",
"babel-plugin-styled-components": "^1.10.0",
"font-awesome": "^4.7.0",
"gatsby": "^2.9.11",
"gatsby-image": "^2.1.4",
"gatsby-mdx": "^0.6.2",
"gatsby-plugin-google-analytics": "^2.0.18",
"gatsby-plugin-lodash": "^3.0.5",
"gatsby-plugin-manifest": "^2.0.29",
"gatsby-plugin-netlify": "^2.0.14",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.0.35",
"gatsby-plugin-sitemap": "^2.0.12",
"gatsby-plugin-styled-components": "^3.0.7",
"gatsby-remark-external-links": "^0.0.4",
"gatsby-source-filesystem": "^2.0.29",
"gatsby-transformer-sharp": "^2.1.18",
"gh-pages": "^2.0.1",
"lodash": "^4.17.11",
"polished": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
"react-spring": "^8.0.19",
"styled-components": "^4.2.0",
"styled-theming": "^2.2.0",
"typeface-fira-sans": "^0.0.54",
"typeface-montserrat": "^0.0.54"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"cypress": "^3.2.0",
"cypress-testing-library": "^2.4.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"#fortawesome/fontawesome-free": "^5.6.3",
"gatsby-cypress": "^0.1.8",
"prettier": "^1.17.0",
"start-server-and-test": "^1.7.13"
},
"homepage": "https://www.alexingberg.com/photos",
"bugs": {
"url": "https://github.com/alexing/photos/issues"
},
"keywords": [
"gatsby",
"gatsby-starter",
"gatsby-starter-portfolio",
"alexing"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/alexing/photos.git"
}
}
Also, in the develop branch of my repo you can find the complete source code.
https://github.com/alexing/photos/tree/develop
Thanks a million.

Resources