I just created a new project using
npx create-next-app#latest --ts
And when I run
npm run lint
I got the error:
next lint
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ESLint must be installed: yarn add --dev eslint
But eslint already installed!
What could be?
Steps to reproduce:
npx create-next-app#latest --ts
cd app
npm install
npm run lint
My package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"lint:css": "stylelint '**/*.{css,tsx}'",
"format": "prettier '**/*' --write --ignore-unknown",
"prepare": "husky install"
},
"dependencies": {
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#stylelint/postcss-css-in-js": "^0.37.2",
"#types/react": "17.0.31",
"eslint": "^8.0.1",
"eslint-config-next": "11.1.2",
"husky": "^7.0.4",
"postcss-syntax": "^0.36.2",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"stylelint": "^14.0.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-styled-components": "^0.1.1",
"typescript": "4.4.4"
}
}
This issue is related to eslint 8.0.1. Downgrade to 7.32.0.
You'll find more info in this open bug: https://github.com/vercel/next.js/issues/29961#issuecomment-945823476
This was a known issue and has been fixed now.
You can upgrade nextjs v12. source
If you still get the issue, try looking for the .eslintrc file to see if it already exists. If it does, delete it and re-run npm run lint. Doing so fixed my problem.
Related
I have a nuxt 3 app, where i want to set global styles via .less files.
nuxt.config.ts
css: [
"#/assets/less/main.less"
],
If i run yarn run dev everything works fine, but when i run
yarn run build (nuxt build) and yarn run preview(nuxt preview) the .less files are just not there. For some reason the build doesnt contain any of the styles from the .less files.
I tried to add the less-loader package (although as i know its not needed in nuxt3).
I guess the problem is around the difference of NODE_ENV production / develop,but im not sure how or what should i config to get the build involve the .less files.
here is my package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"analyze": "nuxt analyze",
"cleanup": "nuxt cleanup"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^11.0.0",
"#nuxtjs/eslint-config-typescript": "^11.0.0",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"dayjs": "^1.11.5",
"eslint": "^8.24.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"line-clamp": "^1.0.0",
"nuxt": "3.0.0-rc.10",
"vue": "^3.2.40"
},
"dependencies": {
"#microsoft/signalr": "^7.0.0",
"bootstrap-vue-3": "0.4.13",
"mitt": "^3.0.0",
"vue-disqus": "^5.1.0",
"vue-gtag": "^2.0.1",
"vue-next-masonry": "1.1.3",
"vue-tweet": "^2.0.2"
}
}
im trying to create a website using NextJS, prisma and netlify functions and deploy it to netlify.
The Website and nextJS framework work quite well while debugging using netlify dev.
The functions dont work. Trying to get a response from the functions ends in this error:
NestedError: Cannot read from `D:/Eigene Dateien/Github/beatraum/node_modules/.prisma`: EISDIR: illegal operation on a directory, read
at Module.createReadStream (file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/cp-file/fs.js:21:9)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at copyFileAsync (file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/cp-file/index.js:11:21)
at file:///C:/Users/s.blaser/AppData/Roaming/npm/node_modules/netlify-cli/node_modules/#netlify/zip-it-and-ship-it/node_modules/p-map/index.js:141:20
Caused By: Error: EISDIR: illegal operation on a directory, read {
nested: [Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
},
errno: -4068,
code: 'EISDIR',
syscall: 'read',
name: 'CopyFileError'
}
Node.js v18.12.1
It doesnt matter whether I start with netlify dev or netlify functions:serve - both ends in the same error.
I deployed the application and the functions work :o
So only the local environment seems to be broken.
I think it has something to do with the prisma dependency, but im quite unsure.
This is my netlify.toml:
# example netlify.toml
[build]
command = "npm run build"
functions = "netlify/functions"
publish = ".next"
[[plugins]]
package = "#netlify/plugin-nextjs"
## Uncomment to use this redirect for Single Page Applications like create-react-app.
## Not needed for static site generators.
#[[redirects]]
# from = "/*"
# to = "/index.html"
# status = 200
## (optional) Settings for Netlify Dev
## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
[dev]
framework = "next"
command = "next dev -p 8080" # Command to start your dev server
targetPort = 8080 # Port that the dev server will be listening on
# publish = "dist" # Folder with the static content for _redirect file
## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/
This is my package.json:
{
"name": "beatraum",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export",
"debug": "netlify dev --inspect"
},
"dependencies": {
"#hapi/iron": "^7.0.0",
"#netlify/functions": "^1.4.0",
"#next/font": "13.1.6",
"#prisma/client": "^4.9.0",
"#types/node": "18.11.18",
"#types/react": "18.0.27",
"#types/react-dom": "18.0.10",
"cookie": "^0.5.0",
"eslint": "8.33.0",
"eslint-config-next": "13.1.6",
"netlify-dev-plugin": "^1.0.28",
"next": "13.1.6",
"passport": "^0.6.0",
"passport-local": "^1.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-netlify-forms": "^1.3.3",
"swr": "^2.0.3",
"typescript": "4.9.5",
"uuid": "^9.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"netlify-cli": "^12.10.0",
"postcss": "^8.4.21",
"prisma": "^4.9.0",
"tailwindcss": "^3.2.4"
}
}
I asked the same question in the netlify forum but didn't receive any answers.
https://answers.netlify.com/t/netlify-dev-functions-cannot-be-called-in-dev-mode-with-prisma-eisdir/85068
Thank you for your help in advance!
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
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)
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