On my local Ubuntu machine, I'm getting this error when I try to run nextjs in production mode using next start:
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /home/pc/mynextapp/.env.local
info - Loaded env from /home/pc/mynextapp/.env
Error: Cannot find module '/home/pc/mynextapp/.next/prerender-manifest.json'
Require stack:
- /usr/local/lib/node_modules/next/dist/server/next-server.js
- /usr/local/lib/node_modules/next/dist/server/next.js
- /usr/local/lib/node_modules/next/dist/server/lib/start-server.js
- /usr/local/lib/node_modules/next/dist/cli/next-start.js
- /usr/local/lib/node_modules/next/dist/lib/commands.js
- /usr/local/lib/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.mod._resolveFilename (/usr/local/lib/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)
at NextNodeServer.getPrerenderManifest (/usr/local/lib/node_modules/next/dist/server/next-server.js:1363:26)
at NextNodeServer.getPreviewProps (/usr/local/lib/node_modules/next/dist/server/base-server.js:348:21)
at new Server (/usr/local/lib/node_modules/next/dist/server/base-server.js:70:32)
at new NextNodeServer (/usr/local/lib/node_modules/next/dist/server/next-server.js:67:9)
at NextServer.createServer (/usr/local/lib/node_modules/next/dist/server/next.js:143:16) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/local/lib/node_modules/next/dist/server/next-server.js',
'/usr/local/lib/node_modules/next/dist/server/next.js',
'/usr/local/lib/node_modules/next/dist/server/lib/start-server.js',
'/usr/local/lib/node_modules/next/dist/cli/next-start.js',
'/usr/local/lib/node_modules/next/dist/lib/commands.js',
'/usr/local/lib/node_modules/next/dist/bin/next'
]
}
Here is my package.json:
{
"name": "mynextapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#types/node": "18.11.9",
"#types/react": "18.0.24",
"#types/react-dom": "18.0.8",
"classnames": "^2.3.2",
"cookie": "^0.5.0",
"marked": "^4.2.2",
"next": "13.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.4",
"react-paginate": "^8.1.4",
"react-query": "^3.39.2",
"styled-jsx": "^5.1.0",
"typescript": "4.8.4"
}
}
How can I fix it?
Related
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.
Can't run the Gatsby application in a development server.
Attempted solutions:
attempted to install polyfill-remote-file but the module doesn't even exist
update node_modules
delete node_modules and reinstall
delete package.json and create a new one
I've tried doing the above along with other potential solutions provided on the internet, but nothing has worked so far.
package.json
{
"name": "slicks-slices-frontend",
"private": true,
"description": "Slick Serves the Sweetest Slices",
"version": "0.1.0",
"license": "MIT",
"type": "module",
"scripts": {
"//": "⁉️ Hey! This might look confusing but allow me to explain. The command we want to run is called gatsby build. But because we want to use es modules with gatsby, we use a package called esm. One way to require it is to set the NODE_OPTIONS environmental variable to -r esm. Finally to make this work for windows users, we use the cross-env package. Hopefully once Node es modules are stable, we can bring this back to simple gatsby build",
"build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
"develop": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
"start": "npm run develop",
"serve": "cross-env NODE_OPTIONS=\"-r esm\" gatsby serve",
"clean": "gatsby clean",
"netlify": "netlify dev",
"prebuild": "netlify-lambda install"
},
"eslintConfig": {
"extends": [
"wesbos"
],
"rules": {
"react/prop-types": 0
}
},
"dependencies": {
"babel-plugin-styled-components": "^2.0.7",
"dotenv": "^16.0.0",
"gatsby": "^4.13.1",
"gatsby-image": "^3.11.0",
"gatsby-plugin-image": "^2.13.0",
"gatsby-plugin-react-helmet": "^5.13.0",
"gatsby-plugin-sharp": "^4.13.0",
"gatsby-plugin-styled-components": "^5.13.0",
"gatsby-plugin-utils": "^3.8.0",
"gatsby-source-sanity": "^7.4.2",
"isomorphic-fetch": "^3.0.0",
"netlify-cli": "^10.1.0",
"netlify-lambda": "^2.0.15",
"normalize.css": "^8.0.1",
"react": "^18.1.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.1.0",
"react-helmet": "^6.1.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^8.14.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-config-wesbos": "^3.0.2",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"esm": "^3.2.25",
"prettier": "^2.6.2",
"react-scripts": "^5.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/wesbos/slicks-slices"
}
}
Terminal
Command ran: npm run develop
> slicks-slices-frontend#0.1.0 develop
> cross-env NODE_OPTIONS="-r esm" gatsby develop
/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js:1
Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'
Require stack:
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1
at Object.<anonymous> (/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/src/utils/start-server.ts:56:1)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js',
'/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1'
]
}
The latest Gatsby supports ESM natively.
Rename your gatsby-node.js to gatsby-node.esm.js, create a new file named gatsby-node.js and add the following
const requireEsm = require('esm')(module);
module.exports = requireEsm('./gatsby-node.esm.js');
Remove NODE_OPTIONS=\"-r esm\" from your scripts.
Take a look at the blogpost for more: https://esausilva.com/2022/05/16/cannot-find-module-gatsby-plugin-utils-polyfill-remote-file/
I created a React project that uses webpack-dev-server and my package.json is:
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint **/*.{js,jsx} --quiet",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.4.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.4.0",
"mini-css-extract-plugin": "^2.4.2",
"prettier": "^2.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
When I run npm run start, I'm getting this error:
[webpack-cli] C:\dev\testproject\node_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
SyntaxError: Unexpected token =
at new Script (vm.js:79:7)
at NativeCompileCache._moduleCompile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Server.getServerTransport (C:\dev\testproject\node_modules\webpack-dev-server\lib\Server.js:1009:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testproject#1.0.0 start: `webpack-dev-server --mode development --open`
What could be the cause of this?
It turns out upgrading my node version (in my case, from 10.13.0 to 16.11.1) resolved this.
I tried this based on advice found here and it worked.
Your babel transpiling is not set up properly you need to add appropriates plugins in your babel config.
Basically this error means that below statement is not supported, and thats because babel is not transpiling your code to a supported ES version.
static heartbeatInterval = 1000;
you may have to use this plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
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",
I am using expo, react native and react together with react native web. I am upgrading to expo#32 and thus react-native#57.1
I am running everything great on phone however not on web. with a dependency error often displayed:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '../Components/AccessibilityInfo/AccessibilityInfo' (While processing preset: "/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js")
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.get AccessibilityInfo [as AccessibilityInfo] (/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js:19:12)
at /Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:163:23
at arrayEach (/Users/jeremie/piple/piple/node_modules/lodash/_arrayEach.js:15:9)
at baseClone (/Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:160:3)
at cloneDeepWith (/Users/jeremie/piple/piple/node_modules/lodash/cloneDeepWith.js:37:10)
at OptionManager.mergeOptions (/Users/jeremie/piple/piple/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:44)
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]
I need to make sure that all my packages versions are compatible. I have looked at the changelog of react native and expo and updated everything as it should..
I don't get how to inspect more and how to debug my error.
Here is my package.json
"name": "piple",
"version": "0.7",
"private": true,
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "^0.10.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^32.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.6.3",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "NODE_ENV=test node_modules/.bin/jest",
"test:ci": "jest --ci",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"deploy:full": "./deploy",
"deploy:fast": "yarn build:prod && expo publish && git add -A && git commit -m 'new version of PiPle keep looking on our develop branch' && git push && git checkout master && git merge --no-edit devellop && git push && git checkout devellop",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"transformIgnorePatterns": [
"node_module/(?!(jest-)?react-native|react-navigation)"
],
"moduleDirectories": [
"node_modules"
],
"preset": [
"jest-expo"
]
},
"dependencies": {
"#sentry/browser": "^4.4.1",
"#sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"expo-analytics": "^1.0.7",
"expo-firebase-crashlytics": "^1.0.0",
"expo-web": "^0.0.14",
"firebase": "^5.0.3",
"get-urls": "^8.0.0",
"javascript-time-ago": "^1.0.34",
"jsc-android": "^224109.1.0",
"lodash": "^4.15.0",
"mobx": "^4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"open-graph-scraper": "^3.6.0",
"password-validator": "^4.1.1",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "^16.6.3",
"react-art": "^16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "^0.10.0",
"react-native-web-svg": "^1.0.0",
"react-navigation": "^3.0.9",
"sentry-expo": "^1.11.0",
"simple-markdown": "git://github.com/CharlesMangwa/simple-markdown.git",
"sweetalert": "^2.1.2",
"uglifyjs-webpack-plugin": "^1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
}
When you call npx expo or npx expo start it should also validate all dependencies, and if there are some problems it writes something like:
Also, npx expo-cli doctor can help by providing additional info.