Vercel Deploy Error: Missing Dependency I already have? - next.js

I got this error when trying to build with vercel
Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"
Despite next being in my dependencies, the app was created with 'create-next-app', i'm not sure at all what to do here can anyone help me out?
Here is my package folder:
{
"name": "project1",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "node server.mjs",
"lint": "next lint"
},
"dependencies": {
"#reduxjs/toolkit": "^1.8.5",
"next": "^12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-redux": "^7.2.8",
},
"devDependencies": {
"eslint": "8.20.0",
"eslint-config-next": "12.2.3"
}
}

Related

unable to run build command successfully on a sveltekit project

I want to deploy my sveltikit App on Firebase but unable to run build command successfully getting error:
[vite-plugin-sveltekit-setup] ENOTEMPTY: directory not empty, rmdir '\?\C:\Users\User\my-CV.svelte-kit\output\server\chunks'
error during build:
your textpackage.json
{
"name": "my-cv",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
},
"devDependencies": {
"#fontsource/fira-mono": "^4.5.10",
"#neoconfetti/svelte": "^1.0.0",
"#sveltejs/adapter-auto": "^1.0.1",
"#sveltejs/adapter-node": "^1.0.0-next.106",
"#sveltejs/adapter-static": "^1.0.5",
"#sveltejs/kit": "^1.0.0",
"#tsconfig/svelte": "^3.0.0",
"#types/cookie": "^0.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"svelte": "^3.54.0",
"svelte-adapter-firebase": "^0.14.4",
"svelte-check": "^2.10.3",
"svelte-preprocess": "^5.0.0",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.4",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"#rodneylab/svelte-social-icons": "^0.0.24",
"firebase-tools": "^11.21.0"
}
}

Keystone crashes inside Turborepo

Keystone fails to find dependencies while running yarn build inside a new Turborepo project.
Steps to reproduce
Install Turborepo in a new project npx create-turbo#latest
navigate to the apps folder or wherever you plan to install Keystone cd apps/
install keystone yarn create keystone-app
navigate back to the root directory cd ../
add .keystone/** to turbo.json Pipeline:
"build": {"dependsOn": [ "^build" ], "outputs": [ ".next/**", ".keystone/admin/.next/**" ]}}
build project from root directory cd ../ && yarn build
Observe error message from inside ./keystone
turbo.json
{
"pipeline": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
".next/**",
".keystone/admin/.next/**"
]
},
"dev": {
"cache": false
},
"clean": {
"cache": false
}
},
"globalDependencies": [
"tsconfig.json",
".prettierrc.json",
".eslintrc.json",
"Procfile"
]
}
package.json
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --no-cache --parallel --continue",
"lint": "turbo run lint",
"test": "turbo run test",
"clean": "turbo run clean && rm -rf node_modules",
"format": "prettier --write \"**/*.{ts,tsx,js,md}\""
},
"devDependencies": {
"prettier": "^2.5.1",
"turbo": "latest"
},
"packageManager": "yarn#1.22.18"
}
apps/keystoneCMS/package.json
{
"name": "logly-admin",
"version": "1.0.0",
"private": true,
"main": "keystone.ts",
"scripts": {
"dev": "keystone dev",
"start": "keystone start",
"build": "keystone build && keystone prisma migrate deploy",
"postinstall": "keystone postinstall"
},
"dependencies": {
"#emotion/css": "^11.7.1",
"#keystone-6/auth": "^1.0.1",
"#keystone-6/cloudinary": "^1.0.0",
"#keystone-6/core": "^1.1.0",
"#keystone-6/fields-document": "^1.0.1",
"#prisma/client": "^3.8.1",
"autoprefixer": "^10.4.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"postcss": "^8.4.7",
"tailwind": "^4.0.0",
"tailwindcss": "^3.0.23",
"typescript": "^4.5.4"
},
"engines": {
"node": "^14.15 || ^16.13"
}
}
Github issue for more context: https://github.com/keystonejs/keystone/issues/7518
Versions
Node: v16.13.1 (latest)
Keystone: v6 (latest)
Turborepo: 1.2.8 (latest)
I have been able to replicate this, and it looks to be an issue with the next version that npx create-turbo#latest installs and is pinned to. Running create-turbo installs next 12.0.8 and is pinned to that version. Keystone requires at least version 12.1.0.
When I changed my ./apps/web/package.json to:
"dependencies": {
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"ui": "*"
},
The error no longer occurred.

Error when trying to deploy NextJS app on Vercel

I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:
19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
type: 'Error',
19:07:34.258
messageTemplate: 'extend-config-missing',
19:07:34.258
messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1
Below is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": []
}
My .eslintrc file:
{
"extends": ["next/babel"]
}
And my package-json file:
{
"name": "google-docs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#material-tailwind/react": "0.3.4",
"#next-auth/firebase-adapter": "^0.1.2",
"draft-js": "^0.11.7",
"firebase": "^8.9.1",
"next": "11.0.1",
"next-auth": "^3.27.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-firebase-hooks": "^3.0.4"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}
Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.
For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.
Then, I install babel-eslint:
npm i babel-eslint --save-dev
I then changed the entire .eslintrc file to this:
{
"parser": "babel-eslint"
}
And the build was successful! Credit goes julio and the answers from this thread:
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

Error: The `revalidate` property is not yet available for general use

My package.json file is
{
"name": "learn-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export"
},
"dependencies": {
"#tailwindcss/typography": "^0.2.0",
"date-fns": "^2.16.1",
"geolib": "^3.3.1",
"google-map-react": "^2.1.3",
"graphql": "^15.3.0",
"graphql-request": "3.0.0",
"gray-matter": "^4.0.2",
"isomorphic-unfetch": "^3.0.0",
"libphonenumber-js": "^1.7.57",
"next": "9.3.5",
"next-seo": "^4.7.3",
"react": "16.13.1",
"react-animated-css": "^1.2.1",
"react-dom": "16.13.1",
"react-gtm-module": "^2.0.11",
"react-static-google-map": "^0.6.2",
"remark": "^12.0.1",
"remark-html": "^12.0.0",
"tailwindcss": "^1.7.6",
"use-position": "^0.0.7"
},
"devDependencies": {}
}
I am trying to use revaildate: 1 in getStaticProps but I am getting error saying
Error: The `revalidate` property is not yet available for general use.
To try the experimental implementation, please use `unstable_revalidate` instead.
As I can see in package.json file my nextjs version is 9.3.5
Can anyone help me what I should do to fix this.
Try using "unstable_revalidate" instead of "revalidate", because in nextjs version <9.5, "revalidate" keyword is not yet generalised.

Invalid PostCSS plugin error while deploying next js site to vercel

I am trying to deploy a site built with next js ( and with tailwindcss) to vercel.But I keep getting this '' Invalid PostCSS Plugin" error".
Error shown in the vercel log
Works completely fine locally.
I'm trying to deploy the site by importing from github.
My postcss.config.js
module.exports = {
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer']
}
My package.json
{
"name": "community-site",
"version": "1.0.0",
"description": "website for Education and Sports Club",
"main": "index.js",
"dependencies": {
"autoprefixer": "^9.8.4",
"axios": "^0.19.2",
"cosmicjs": "^3.2.48",
"express": "^4.17.1",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"next": "^9.4.4",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-toastify": "^6.0.8",
"tailwindcss": "^1.4.6"
},
"devDependencies": {
"nodemon": "^2.0.4"
},
"scripts": {
"build:tailwind": "postcss styles/tailwind.css -o styles/tailwind.generated.css",
"watch:tailwind": "postcss -w styles/tailwind.css -o styles/tailwind.generated.css",
"start": "run-p watch:tailwind start:next",
"start:next": "next start",
"dev": "next",
"prebuild": "npm run build:tailwind",
"build": "next build"
},
"author": "Salvator",
"license": "ISC"
}

Resources