npm install next react react-dom And running Node.js v12
Created most simple pages/index.tsx
export default function PageHome(props) {
return <>Hello World!</>
}
(I also had TypeScript configured as per Next.js instructions but not sure if that's making a difference.)
C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev
...
event - compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar to a directory
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar to a directory
Self-answered solution below for future readers.
Upgrade Node.js
Delete package-lock.json and node_modules
Run npm install again
It works
Apparently something doesn't install when you run with an older Node.js version.
My package.json looked like
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^10.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#types/react": "^17.0.3",
"typescript": "^4.2.4"
}
}
The same package.json will install slightly differently switching from Node.js v12 to Node.js v15 as I just observed. This is why you have to complete not just step 1, but also steps 2 & 3.
Before:
C:\GitHub\reproduce-nextjs-webpack5-error>node --version
v12.4.0
C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev
> # dev C:\GitHub\reproduce-nextjs-webpack5-error
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
event - compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar to a directory
After:
C:\GitHub\reproduce-nextjs-webpack5-error>node --version
v15.14.0
C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev
> dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
Yay! No warnings!
While there are comments below about future changes in nextjs#canary, the above examples worked for me with versions listed.
Delete the .next folder and re-run npm run dev.
This happens when your system shuts down unexpectedly without saving.
I have resolved this problem by killing all node processes on my production server.
Related
So normally Vercel gives me decent error messages, but this one seems to have no detail. Just
"failed with exit code 1".
For context, I just started this project w the basic NextJS template, made a few modifications, and this is my first deploy.
Failed once and I assumed it was because NextJS has strict type checking on by default, so I modified the next.config.js file as follows (per here):
module.exports = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
},
};
But still failed. Here is the full log:
10:23:27.575 Cloning github.com/lawderp/physical (Branch: main, Commit: 8f97554)
10:23:28.589 Cloning completed: 1.014s
10:23:28.614 Analyzing source code...
10:23:29.739 Installing build runtime...
10:23:31.612 Build runtime installed: 1.873s
10:23:34.043 Looking up build cache...
10:23:34.164 Build cache found. Downloading...
10:23:35.100 Build cache downloaded [21.48 MB]: 936.007ms
10:23:36.250 Installing dependencies...
10:23:36.489 yarn install v1.22.11
10:23:36.547 [1/4] Resolving packages...
10:23:36.734 success Already up-to-date.
10:23:36.743 Done in 0.26s.
10:23:36.754 Detected Next.js version: 11.1.2
10:23:36.755 Running "yarn run build"
10:23:37.021 yarn run v1.22.11
10:23:37.047 $ next build
10:23:37.820 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
10:23:37.976 info - Skipping validation of types...
10:23:40.439 error Command failed with exit code 1.
10:23:40.439 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
10:23:40.456 Error: Command "yarn run build" exited with 1
Still not sure what the issue was but eventually figured out how to get past this - ignored ESLint during build by adding the following to next.config.js:
eslint: {
ignoreDuringBuilds: true,
},
(I don't advise doing this but this was quick low-stakes experiment)
I received the same vague message after making eslint alterations. Locally linting and deployment was successful, however deploying to vercel failed like yours.
Although "ignoreDuringBuilds": "true" in my .eslint.json did band-aid fix the issue, I was able to rollback each eslint change and found that my "linebreak-style": ["error", "windows"] was the underlying issue.
It passed linting locally, but failed on vercel deployment. I've fixed my line-breaks and all works great now without having to ignore during builds.
I am trying to deploy an app to Vercel, and getting this error at build
14:13:58.168 Cloning github.com/ChrisB007/moodflics (Branch: main, Commit: 7a2acfe)
14:13:58.575 Cloning completed: 406.06ms
14:13:58.624 Analyzing source code...
14:13:59.946 Installing build runtime...
14:14:03.139 Build runtime installed: 3.193s
14:14:07.055 Build cache not provided
14:14:08.517 Installing dependencies...
14:14:09.142 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion#1, but package-lock.json was generated for lockfileVersion#2. I'll try to do my best with it!
14:14:23.664 npm WARN moodflics#0.1.0 No repository field.
14:14:23.676 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/fsevents):
14:14:23.677 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:14:23.681 added 387 packages from 281 contributors in 14.582s
14:14:23.836 62 packages are looking for funding
14:14:23.836 run `npm fund` for details
14:14:23.861 Detected Next.js version: 10.2.0
14:14:23.864 Running "npm run build"
14:14:24.144 > moodflics#0.1.0 build /vercel/path0
14:14:24.144 > next build
14:14:24.557 warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
14:14:24.912 info - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
14:14:25.052 info - Checking validity of types...
14:14:25.068 Attention: Next.js now collects completely anonymous telemetry regarding usage.
14:14:25.068 This information is used to shape Next.js' roadmap and prioritize features.
14:14:25.068 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
14:14:25.068 https://nextjs.org/telemetry
14:14:25.123 info - Creating an optimized production build...
14:14:29.905 Failed to compile.
14:14:29.906 ModuleNotFoundError: Module not found: Error: Can't resolve 'next-auth/client' in '/vercel/path0/pages'
14:14:29.906 > Build error occurred
14:14:29.907 Error: > Build failed because of webpack errors
14:14:29.907 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
14:14:29.907 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
14:14:29.946 npm ERR! code ELIFECYCLE
14:14:29.947 npm ERR! errno 1
14:14:29.951 npm ERR! moodflics#0.1.0 build: `next build`
14:14:29.951 npm ERR! Exit status 1
14:14:29.951 npm ERR!
14:14:29.951 npm ERR! Failed at the moodflics#0.1.0 build script.
14:14:29.951 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
14:14:29.959 npm ERR! A complete log of this run can be found in:
14:14:29.959 npm ERR! /vercel/.npm/_logs/2021-05-10T18_14_29_952Z-debug.log
14:14:29.972 Error: Command "npm run build" exited with 1
Everything seems to be working fine locally, but when I tried deploying it to Vercel I got the above error message. Can you tell me how to fix it?
Sometimes Vercel acts wired that my codes run locally(npm run dev) but fail after upload. This happens when I use Github automatic deployment, i.e. I directly push to my Github repo then Vercel automatically build and update.
However, using Vercel CLI solved my problem. run vercel for preview then vercel --prod for deployment in production
It can't resolve next-auth/client
ModuleNotFoundError: Module not found: Error: Can't resolve 'next-auth/client' in '/vercel/path0/pages'
Ensure that next-auth is properly installed as a dependency and not a dev dependency. Also upgrade your version of react, it's throwing a warning about it not being 17.01 or higher. If you are using typescript, try module augmentation via the next-auth namespace as indicated in their documentation for typescript namespaces. For example, an #/types/next.d.ts file and an #/types/next-auth.d.ts file for module augmentation.
Locally, I use nextauth as well, and have the following in my #/types/next.d.ts file:
import type { NextComponentType, NextPageContext } from 'next';
import type { Session } from 'next-auth';
import type { Router } from 'next/router';
declare module 'next/app' {
type AppProps<P = Record<string, unknown>> = {
Component: NextComponentType<NextPageContext, any, P>;
router: Router;
__N_SSG?: boolean;
__N_SSP?: boolean;
pageProps: P & {
/** Initial session passed in from getServerSideProps or getInitialProps */
session?: Session;
};
};
}
As for the contents of my #/types/next-auth.d.ts file, it's for a custom headless wordpress auth flow, but you can customize the Session/User interfaces regardless of whether you're using a custom approach or not
import NextAuth, { User } from 'next-auth';
import { JWT } from 'next-auth/jwt';
import { WordpressUserPartialFragment } from '../graphql/generated/graphql';
declare module 'next-auth' {
interface Session extends WordpressUserPartialFragment {
response: {
accessToken: string;
id: string;
avatar: {
url: string;
};
description: string | null;
slug: string;
username: string;
email: string;
firstName: string;
lastName: string;
token_exp: string;
refresh_token: string;
locale: string;
};
}
}
Delete node_modules and run yarn install.
Then do yarn build.
If you use npm then do npm i and npm run build instead of yarn install and yarn build.
Then deploy
Check .vercelignore file for folders/files you are missing.
In my case, I have included folder and forgot.
Also double check what source files got synced to vercel, under project deployments, source tab.
I'd like to start a new React Native project including SQLite Storagee.
I've already done this before so I know that it should work, but not today...
So I've init a new project in which I installed react-native-sqlite-storage following this step by step tutorial (https://www.npmjs.com/package/react-native-sqlite-storage), the android part.
Everything is fine untill I run my project whith react-native run-android.
Here is my package.json file
{
"name": "pokedex",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-sqlite-storage": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.2.2",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Here is the result in my terminal. I don't understand what's going on.
FAILURE: Build failed with an exception.
* What went wrong:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-sqlite-storage.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-sqlite-storage:
- None of the consumable configurations have attributes.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 10s
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-sqlite-storage.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-sqlite-storage:
- None of the consumable configurations have attributes.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 10s
at checkExecSyncError (child_process.js:629:11)
at execFileSync (child_process.js:647:13)
at runOnAllDevices (/home/axel/leclercq.axel#gmail.com/Pokedex/Developpement - AXEL ONLY/V5/pokedex/node_modules/#react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:74:39)
at buildAndRun (/home/axel/leclercq.axel#gmail.com/Pokedex/Developpement - AXEL ONLY/V5/pokedex/node_modules/#react-native-community/cli-platform-android/build/commands/runAndroid/index.js:158:41)
at then.result (/home/axel/leclercq.axel#gmail.com/Pokedex/Developpement - AXEL ONLY/V5/pokedex/node_modules/#react-native-community/cli-platform-android/build/commands/runAndroid/index.js:125:12)
at process._tickCallback (internal/process/next_tick.js:68:7)
I've tried it with various version of both react-native and sqlite-storage but nothing works.
Need help please
Hey I found the solution!
Just go to your settings.gradle file and change
THIS LINE
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')
TO THIS
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/platforms/android')
Greetings!
Same problem :(
Could not determine the dependencies of task ':app:preDebugBuild'.
Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not resolve project :react-native-sqlite-storage.
Required by:
project :app
Unable to find a matching configuration of project :react-native-sqlite-storage: None of the consumable configurations have attributes.
React Native also requires Java SE Development Kit (JDK). I installed it and then just restarted the program and the error was resolved. Hopefully this works for you as well!!
Greetings.
I've been unable to deploy a Next.js app via ZEIT Now due to a Gun.js reference error, OSSL_WEBCRYPTO_OR_TEXT_ENCODING_NOT_INSTALLED is not defined. There are no errors when running in development mode on my local machine.
Just prior to the error in the deployment logs is the message "node-webcrypto-ossl and text-encoding may not be included by default, please add it to your package.json!" Doing so did not fix the error, nor did adding #trust/webcrypto as per https://github.com/amark/gun#additional-cryptography-libraries (I'm using SEA for user authentication) (EDIT: removed #trust/webcrypto from dependencies).
Stack trace from Now deployment logs:
Compiled with warnings.
./node_modules/gun/gun.js
Critical dependency: the request of a dependency is an expression
./node_modules/gun/sea.js
Critical dependency: the request of a dependency is an expression
./node_modules/gun/gun.js
Critical dependency: the request of a dependency is an expression
./node_modules/gun/sea.js
Critical dependency: the request of a dependency is an expression
Hello wonderful person! :) Thanks for using GUN, feel free to ask for help on https://gitter.im/amark/gun and ask StackOverflow questions tagged with 'gun'!
node-webcrypto-ossl and text-encoding may not be included by default, please add it to your package.json!
> Build error occurred
ReferenceError: OSSL_WEBCRYPTO_OR_TEXT_ENCODING_NOT_INSTALLED is not defined
at /tmp/173ebd33/.next/serverless/pages/index.js:13474:7
at /tmp/173ebd33/.next/serverless/pages/index.js:13301:7
at /tmp/173ebd33/.next/serverless/pages/index.js:13478:5
at Object.<anonymous> (/tmp/173ebd33/.next/serverless/pages/index.js:14596:2)
at Object.md/m (/tmp/173ebd33/.next/serverless/pages/index.js:14597:30)
at __webpack_require__ (/tmp/173ebd33/.next/serverless/pages/index.js:23:31)
at Object.1TCz (/tmp/173ebd33/.next/serverless/pages/index.js:865:11)
at __webpack_require__ (/tmp/173ebd33/.next/serverless/pages/index.js:23:31)
at Module.VVmT (/tmp/173ebd33/.next/serverless/pages/index.js:11281:12)
at __webpack_require__ (/tmp/173ebd33/.next/serverless/pages/index.js:23:31)
at /tmp/173ebd33/.next/serverless/pages/index.js:91:18
at Object.<anonymous> (/tmp/173ebd33/.next/serverless/pages/index.js:94:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
npm
ERR! code ELIFECYCLE
npm
ERR! errno 1
npm
ERR! maptivist#1.0.0 now-build: `next build`
npm ERR!
Exit status 1
npm ERR!
npm ERR! Failed at the maptivist#1.0.0 now-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
package.json dependencies:
{
"dependencies": {
"directory-named-webpack-plugin": "^4.0.1",
"gun": "^0.2019.726",
"mapbox-gl": "^1.2.1",
"next": "^9.0.3",
"next-offline": "^4.0.3",
"node-webcrypto-ossl": "^1.0.48",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"styled-components": "^4.3.2",
"text-encoding": "^0.7.0"
}
}
node-webcrypto-ossl-related stuff in package-lock.json:
...
"gun": {
"version": "0.2019.726",
"resolved": "https://registry.npmjs.org/gun/-/gun-0.2019.726.tgz",
"integrity": "sha512-LVSxhGwaemZbrirSk6fp2KXORLUyjs6bnssjSjl/OhwbfLv7fvMhNfaOZuorzYsehxqMKJvxyNdFq/mZNXpjHQ==",
"requires": {
"emailjs": "^2.2.0",
"node-webcrypto-ossl": "^1.0.47",
"text-encoding": "^0.7.0",
"ws": "~>7.1.0"
}
},
...
"node-webcrypto-ossl": {
"version": "1.0.48",
"resolved": "https://registry.npmjs.org/node-webcrypto-ossl/-/node-webcrypto-ossl-1.0.48.tgz",
"integrity": "sha512-MWUkQ/5wrs7lpAr+fhsLMfjdxKGd3dQFVqWbNMkyYyCMRW8E7ScailqtCZYDLTnJtU6B+91rXxCJNyZvbYaSOg==",
"requires": {
"mkdirp": "^0.5.1",
"nan": "^2.13.2",
"tslib": "^1.9.3",
"webcrypto-core": "^0.1.26"
}
},
...
node-webcrypto-ossl is visible in node_modules.
Please help! :-)
#randy-morantes your package.json looks correct.
Could you try to share:
The stacktrace of the error.
Your server code that calls gun that causes this problem.
I am an author of the peculiar\webcrypto and node-webcrypto-ossl packages. Based on the source of gun:
https://github.com/amark/gun/blob/e0d85f02b567a43d39cda0fe71522b84ff52a08b/sea/shim.js#L25
It looks like they have not switched to peculiar\webcrypto yet. Try adding node-webcrypto-ossl to your package.json.
The latest version of Next.js ("next": "9.0.4", "next-offline": "4.0.5") fixed the issue!
I've encountered this problem last night and finally successfully fixed it using some monkey-patch and hack around. The trick is taking gun and sea out of the webpack and react environment, then access it using window.gun. Also, gun seems running faster when it is not in webpack.
This is how I did it in my Gatsbyjs project:
Read this doc: https://www.gatsbyjs.org/docs/custom-html/
Copy ./cache/default-html.js to ./src/html.js
Now start gun and sea in the of html.js. You can load external js file from github or jsdelivr here.
Then in your gatsby react components, just call window.gun and window.user and enjoy hacking:
if (window) gun...
Now run gatsby build and you can see it is built without error.
edit - There is something strange: mongo appears in both package.json and in .meteor/packages files (should it appear in package.json at all?? it wasn't there before the update) but in different versions. here is my package.json:
{
"name": "something",
"version": "1.1.1",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.49",
"babel-runtime": "^6.26.0",
"bootstrap": "^3.3.7",
"google-protobuf": "^3.5.0",
"grpc": "^1.12.2",
"grpc-tools": "^1.6.6",
"meteor-node-stubs": "^0.3.3",
**"mongodb": "^3.1.0-beta4",**
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-progressbar.js": "^0.2.0",
"react-router": "^3.2.1",
"react-router-dom": "^4.2.2"
}
}
and here is my .meteor/packages:
meteor-base#1.3.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
**mongo#1.4.2 # The database Meteor supports right now**
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.1.3 # Meteor's client-side reactive programming library
standard-minifier-css#1.4.0 # CSS minifier run for production mode
standard-minifier-js#2.3.1 # JS minifier run for production mode
es5-shim#4.7.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.10.6 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
session#1.1.7
tarang:ssl
After updating to 1.6.1.1, my app won’t run, crashing with message 'Error: Cannot find module “mongodb” '.
Tried to run meteor npm install, even took away the entire node_modules folder and built it again.
Tried to run meteor npm update.
Tried to run meteor npm install mongodb.
Tried to downgrade back to version 1.6.0.1.
Still can’t find mongodb.
Important - mongodb is there, all collections are there - I can access it through the terminal with "meteor mongo".
Any help?
If it helps - The data in the db can be erased if there is no other way.
(running on ubuntu 16.04)
Thanks
In the end, the problem was not in the project but in meteor globally, so I uninstalled and re-installed meteor globally, and everything got back to normal…
Thank you all!