Fix package resolution error when using Yarn 1

[johnnyshankman]

What minimal example or steps are needed to reproduce the bug?

Just install and try to run the linter, fails before it can even start reading files.

What minimal configuration is needed to reproduce the bug?

{
  "name": "template-vue3",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "^18.0.0"
  },
  "scripts": {
    "prebuild": "rimraf ./dist",
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test:unit": "vitest",
    "qa": "http-server ./dist -p 8080",
    "test:unit:dev": "vitest --watch tests/unit/",
    "lint": "yarn lint:src && yarn lint:test && yarn lint:scss && yarn typecheck",
    "lint:fix": "yarn lint:src:fix &&  yarn lint:test:fix && yarn lint:scss:fix",
    "lint:src": "eslint 'src/**/*.{ts,vue}' --no-fix",
    "lint:src:fix": "eslint 'src/**/*.{ts,vue}' --fix",
    "lint:test": "eslint 'tests/**/*.{ts,vue}' --no-fix",
    "lint:test:fix": "eslint 'tests/**/*.{ts,vue}' --fix",
    "lint:scss": "stylelint 'src/**/*.{vue,scss}' --config stylelint.config.js",
    "lint:scss:fix": "stylelint 'src/**/*.{vue,scss}' --config stylelint.config.js --fix",
    "typecheck": "vue-tsc --noEmit",
    "typecheck:watch": "vue-tsc --noEmit --watch"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.2",
    "@heroicons/vue": "^1.0.5",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.4.0",
    "@vueuse/head": "^0.7.5",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "pinia": "^2.0.23",
    "socket.io-client": "^4.2.0",
    "vue": "^3.3.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vue-timer-hook": "^0.0.22"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-decorators": "^7.16.7",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-typescript": "^7.14.5",
    "@pinia/testing": "^0.1.3",
    "@testing-library/vue": "^7.0.0",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.0.0-0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-tailwindcss": "^3.14.0",
    "eslint-plugin-vue": "^9.9.0",
    "http-server": "^14.1.1",
    "husky": "^8.0.0",
    "jsdom": "^22.1.0",
    "lint-staged": "^13.2.3",
    "postcss": "^8",
    "postcss-html": "^1.5.0",
    "postcss-sass": "^0.5.0",
    "prettier": "^2.6.0",
    "rimraf": "^3.0.2",
    "sass": "^1.45.2",
    "strip-ansi": "^7.1.0",
    "stylelint": "^15.10.2",
    "stylelint-config-recommended": "^13.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^10.0.0",
    "stylelint-scss": "^5.0.1",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.1.6",
    "vite": "^4.4.5",
    "vite-plugin-stylelint": "^5.3.1",
    "vitest": "^0.33.0",
    "vue-cli-plugin-tailwind": "~2.2.18",
    "vue-eslint-parser": "^9.3.1",
    "vue-tsc": "^1.0.9"
  }
}

How did you run Stylelint?

stylelint 'src/**/*.{vue,scss}' --config stylelint.config.js

Which Stylelint-related dependencies are you using?

See above

What did you expect to happen?

I can lint

What actually happened?

I get issues surrounding strip-ansi and stylish resolutions.

There was a problem loading formatter: /Users/johnshankman/Documents/manifoldxyz/manifold-vue3-template/node_modules/eslint/lib/cli-engine/formatters/stylish
Error: require() of ES Module /Users/johnshankman/Documents/manifoldxyz/manifold-vue3-template/node_modules/strip-ansi/index.js from /Users/johnshankman/Documents/manifoldxyz/manifold-vue3-template/node_modules/eslint/lib/cli-engine/formatters/stylish.js not supported.
Instead change the require of index.js in /Users/johnshankman/Documents/manifoldxyz/manifold-vue3-template/node_modules/eslint/lib/cli-engine/formatters/stylish.js to a dynamic import() which is available in all CommonJS modules.
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.

Do you have a proposal to fix the bug?

Nope, this is a known issue in yarn 1. Not sure how you fix but boy is it annoying.

[johnnyshankman]

Follow up, during install i see issues like this that go away when i uninstall stylelint:

warning Pattern ["strip-ansi@^6.0.1"] is trying to unpack in the same destination "/Users/johnshankman/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/Users/johnshankman/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "/Users/johnshankman/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.2.3"] is trying to unpack in the same destination "/Users/johnshankman/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.

[johnnyshankman]

Update: I was able to get some stability by upgrading to the following packages so that all of stylelint is more in line with itself:

"stylelint": "^16.0.0",
"stylelint-config-recommended": "^14.0.0",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^35.0.0",
"stylelint-config-standard-scss": "^12.0.0",
"stylelint-scss": "^6.0.0",

Double update:

Nope that didn't work I still need this to get things to function inside of repos with eslint:

"resolutions": {
    "strip-ansi": "^6.0.1",
    "string-width": "^4.0.0"
  }

[jeddy3]

@johnnyshankman Thanks for the report, using the template and for providing updates.

Can you share your stylelint.config.js file, please?

[johnnyshankman]

Yessir! Problem is it uses a private package but

const manifoldConfig = require('@manifoldxyz/lint-configs/stylelint');

module.exports = {
  ...manifoldConfig,
  rules: {
    ...manifoldConfig.rules,
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
      },
    ],
  },
};

My solution was to stop using yarn and move over to npm.

[Mouvedia]

related: yarnpkg/yarn#8976, yarnpkg/yarn#9023

@johnnyshankman which version of yarn are you using?