🐛 BUG: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import inside of Astro Language Server Output Tab in VSCode

[adamklepacz]

Describe the Bug

When I try to run >Format Document inside VCCode on .astro file I get this error:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro' is not supported resolving ES modules imported from /Users/adam.klepacz/Documents/projects/node_modules/prettier/index.mjs
Did you mean to import /Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro/dist/index.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:425:17)
    at moduleResolve (node:internal/modules/esm/resolve:1012:10)
    at defaultResolve (node:internal/modules/esm/resolve:1220:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ESMLoader.import (node:internal/modules/esm/loader:528:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro'
}

Node version is 18.12.14 npm version 8.19.2

Here is my package.json

{
  "name": "myproject",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "prepare": "husky install",
    "format": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,md,astro}'"
  },
  "dependencies": {
    "@astrojs/node": "^5.0.3",
    "@astrojs/react": "^2.0.2",
    "@astrojs/tailwind": "^3.0.1",
    "astro": "^2.0.6",
    "classnames": "^2.3.2",
    "contentful": "^9.3.0",
    "embla-carousel": "^8.0.0-rc07",
    "formik": "^2.2.9",
    "fuse.js": "^6.6.2",
    "nanoid": "^4.0.2",
    "nanostores": "^0.7.3",
    "sds-component-library": "0.1.6",
    "sds-component-library-react": "0.1.6",
    "tailwindcss": "^3.2.4",
    "tw-colors": "^1.2.6",
    "video.js": "^8.3.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@types/marked": "^4.0.8",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "astro": "^2.0.9",
    "astro-seo": "^0.7.0",
    "cf-content-types-generator": "^2.12.2",
    "dotenv": "^16.0.3",
    "husky": "^8.0.0",
    "marked": "^4.2.12",
    "prettier-plugin-tailwindcss": "^0.2.2",
    "pretty-quick": "^3.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "sds-tailwind-config": "^1.1.4",
    "typedoc": "^0.24.7",
    "videojs-youtube": "^3.0.1"
  }
}

here is my .prettierrc file

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

I also tried with this .prettierrc file where I manually defined the plugin itselft. Also didn't work.

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Here is what I see in node_modules after installing my project

Anytime I try to run vscode command >Format Document on .astro file I got this error in Astro language server Output tab

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro' is not supported resolving ES modules imported from /Users/adam.klepacz/Documents/projects/node_modules/prettier/index.mjs
Did you mean to import /Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro/dist/index.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:425:17)
    at moduleResolve (node:internal/modules/esm/resolve:1012:10)
    at defaultResolve (node:internal/modules/esm/resolve:1220:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ESMLoader.import (node:internal/modules/esm/loader:528:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/adam.klepacz/Documents/projects/sds/mywow/node_modules/prettier-plugin-astro'
}

Steps to Reproduce

1. npm init astro using template
2. ...
3. ...
4. ...
5. Error! Describe what went wrong (and what was expected instead)...

[Loa212]

I have a similar problem

[Princesseuh]

duplicate of https://github.com/withastro/language-tools/issues/616