Open MatanelGordon opened 1 year ago
I've found the same error after creating a new Nuxt project. Very ugly.
@josepcrespo did my solution work for you?
opened PR at #1029
@MatanelGordon works for me, thx. I don't know why this problem still occurs today, it's really annoying
I got the same issue today after a fresh installation using npx create-nuxt-app nuxtjs-tutorial
:
> npx create-nuxt-app nuxtjs-tutorial
Need to install the following packages:
create-nuxt-app@5.0.0
Ok to proceed? (y)
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtjs-tutorial
? Project name: anonymized
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - Git-based headless CMS
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests, Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? anonymized
? Version control system: Git
yarn run v1.22.19
$ prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix
.eslintrc.js
.github/dependabot.yml
components/NuxtLogo.vue
components/Tutorial.vue
components/VuetifyLogo.vue
content/hello.md
jest.config.js
layouts/default.vue
layouts/error.vue
nuxt.config.js
package.json
pages/index.vue
pages/inspire.vue
README.md
stylelint.config.js
tsconfig.json
$ eslint --ext ".js,.ts,.vue" --ignore-path .gitignore . --fix
$ stylelint "**/*.{css,scss,sass,html,vue}" --ignore-path .gitignore --fix
Invalid Option: Invalid value "consecutive-duplicates-with-different-syntaxes" for option "ignore" of rule "declaration-block-no-duplicate-properties"
components/NuxtLogo.vue
16:1 ✖ Unknown rule media-query-no-invalid media-query-no-invalid
16:1 ✖ Unknown rule selector-anb-no-unmatchable selector-anb-no-unmatchable
components/VuetifyLogo.vue
6:1 ✖ Unknown rule media-query-no-invalid media-query-no-invalid
6:1 ✖ Unknown rule selector-anb-no-unmatchable selector-anb-no-unmatchable
layouts/error.vue
40:1 ✖ Unknown rule media-query-no-invalid media-query-no-invalid
40:1 ✖ Unknown rule selector-anb-no-unmatchable selector-anb-no-unmatchable
6 problems (6 errors, 0 warnings)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
🎉 Successfully created project infotrem-web
To get started:
cd nuxtjs-tutorial
yarn dev
To build & start for production:
cd nuxtjs-tutorial
yarn build
yarn start
To test:
cd nuxtjs-tutorial
yarn test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
npm notice Run npm install -g npm@9.8.1 to update!
npm notice
This was the generated package.json content mentioned in the previous comment:
...
"stylelint": "^14.13.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^28.0.0",
...
I removed the stylelint-config-prettier
line, updated the others, and removed the extends mention as suggested by @MatanelGordon. Then I ran yarn install
(which bumped stylelint
to 15.10.3
), yarn dev
and the error was gone:
> yarn dev
yarn run v1.22.19
$ nuxt
ℹ Parsed 1 files in 0.6 seconds @nuxt/content 19:00:23
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.17.1 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 7:00:24 PM
ℹ Initial build may take a while 7:00:24 PM
ℹ Discovered Components: .nuxt/components/readme.md 19:00:24
✔ Builder initialized 7:00:24 PM
✔ Nuxt files generated 7:00:24 PM
✔ Client
Compiled successfully in 12.90s
✔ Server
Compiled successfully in 8.84s
No issues found. 7:00:39 PM
ℹ Waiting for file changes 7:00:39 PM
ℹ Memory usage: 288 MB (RSS: 434 MB) 7:00:39 PM
ℹ Listening on: http://localhost:3000/ 7:00:39 PM
So I can confirm that the issue is still present and that the solution proposed by @MatanelGordon works. Thank you!
I have updated "@nuxtjs/stylelint-module": "^5.1.0"
in the package.json
file, and the issue has been fixed when run npm run dev
. HOWEVER, I removed the node_modules
folder and the package-lock.json
file, then ran npm install
for a clean installation, and I encountered compile-time errors. I THINK this is not a good solution.
@serkon
Just to be clear, my solution refers to Nuxt V2
projects. However, packages like @nuxtjs/stylelint-module
refer to Nuxt V3
projects which is a whole other thing to itself.
I encourage you to open an issue at @nuxtjs/stylelint-module
's Github to fix the problem you're having.
@MatanelGordon
Thanks for your response, MatanelGordon. I'd like to clarify that I'm actually using Nuxt V2, and I encountered the same issue. It seems there might be some confusion regarding the @nuxtjs/stylelint-module package. While you mentioned it's for Nuxt V3, I believe it's also present in Nuxt V2. I'll still consider opening an issue on Github to address this, but I thought it's important to clarify the version I'm working with.
this is the reason. but it is supported by stylelint in official website. update your version of stylelint to the latest can resolve the problem
Version
create-nuxt-app: v5.0.0
Steps to reproduce
What is Expected?
When running
yarn lint:style
should not throw warning when nothing changed.What is actually happening?
When running
yarn lint:style
I get the following error:This means it doesn't recognize the used class names in vue's template.
How I solved it?
I updated the dependencies of the following packages:
Also, I removed
stylelint-config-prettier
.the final stylelint should look like the follows:
found the solution in a problem in stylelint's issues in addition to the migration guide for stylelint v15 which stated: