Keystone crashes inside Turborepo - next.js

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.

Related

Vercel Deploy Error: Missing Dependency I already have?

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

Failed to load plugin '#next/next' when running npm run lint in GitLab CI

Locally I can run npm run lint without issues on Windows. However, on my ubuntu gitlab runner I get followint error:
Failed to load plugin '#next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js': Unexpected token '.'
Referenced from: /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js
The .eslintrc.json file is auto-generated and only contains:
{
"extends": "next/core-web-vitals"
}
I also tried with "extends": "next".
=> Is this a bug of next.js? If not, what can I do?
My package.json:
{
"name": "micat",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "5.1.3",
"crossfilter2": "1.5.4",
"d3": "7.5.0",
"dc": "4.2.7",
"exceljs": "^4.3.0",
"next": "12.2.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.18.0",
"eslint-config-next": "12.2.2",
"eslint-plugin-jest": "24.4.0",
"eslint-plugin-jsx-a11y": "6.6.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "28.1.2",
"jest-cli": "27.2.0",
"jest-jasmine2": "27.2.0"
}
}
Accorrding to
https://github.com/vercel/next.js/discussions/38220
its due to different versions of nodejs
I installed nvm and updated nodejs from version 12.22 to to version 18.6.0 then deployed it for the other users (gitlab-runner)
n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; cp -r $n/{bin,lib,share} /usr/local
Also see
https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/
https://dzone.com/articles/making-nodejs-available-to-all-users-with-nvm
I removed the node_modules folder with rm -r node_modules an reinstalled with npm install
=> npm run lint works now

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)

npm run build fails with: Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined

I´m currently working on a website using vue/cli 4.5.13 and firebase.
After trying to get a simple authentification site working, my npm run build fails with this message:
ERROR Failed to compile with 1 error
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined
You may use special comments to disable some warnings. Use //
eslint-disable-next-line to ignore the next line. Use /*
eslint-disable */ to ignore all warnings in a file. ERROR Build
failed with errors.
I know this problem was asked here frequently but all the given solutions didn´t work for me.
So far i tried: npm install typescript#latest, npm uninstall #vue/component-compiler-utils,
npm install --dev #vue/component-compiler-utils#3.1.2, npm update vue-template-compiler and npm audit fix (--force).
my package.json looks like this:
"name": "my-website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/component-compiler-utils": "^3.1.2",
"core-js": "^3.6.5",
"typescript": "^4.3.2",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-service": "^3.5.3",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try to delete node modules directory and then run
npm install

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