search

withastro / language-tools

Language tools for Astro
MIT License
271 stars 54 forks source link

🐛 BUG: ERR_REQUIRE_ESM on .astro file save #627

Closed mattmodrowski closed 1 year ago

mattmodrowski commented 1 year ago

Describe the Bug

When saving a .astro file in my project, the file fails to format and I get the following error in the 'Astro Language Server' console:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/node_modules/prettier-plugin-astro/dist/index.js from /Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js not supported.
Instead change the require of /Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/node_modules/prettier-plugin-astro/dist/index.js in /Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js to a dynamic import() which is available in all CommonJS modules.
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at /Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (/Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js:38141:128)
    at Object.load [as loadPlugins] (/Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js:16147:23)
    at /Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js:38181:24
    at Object.format (/Users/matt/Documents/projects/designmate-v2/node_modules/prettier/index.js:38197:12)
    at Object.provideDocumentFormattingEdits (/Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/dist/node/server.js:645:3492)
    at async g (/Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/dist/node/server.js:61:811)
    at async Object.format (/Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/dist/node/server.js:60:6566)
    at async Immediate.<anonymous> (/Users/matt/.vscode/extensions/astro-build.astro-vscode-2.1.4-darwin-x64/dist/node/server.js:80:23759) {
  code: 'ERR_REQUIRE_ESM'
}

I have the following in my user settings.json:

"[astro]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "astro-build.astro-vscode"
  },

Current package.json has the following:

"dependencies": {
    "@astrojs/tailwind": "^4.0.0",
    "@fontsource-variable/figtree": "^5.0.9",
    "@fontsource-variable/public-sans": "^5.0.9",
    "astro": "^2.10.12",
    "astro-icon": "^1.0.0-next.2",
    "astro-seo": "^0.7.5",
    "tailwindcss": "^3.3.3"
  },

I've tried reinstalling the extension, disabled all other potentially competing plugins, removed my node_modules folder and reinstalled but continue to receive the above output.

Steps to Reproduce

  1. Save an .astro file with the above configuration and the VS Code extension installed
  2. Receive the above output in the 'Astro Language Server' console
  3. I expected my .astro file to be formatted using Prettier
Princesseuh commented 1 year ago

It seems like it's using the wrong Prettier version because it sees the one in Astro itself. Both this issue and #621 will be fixed by Astro 3.0, but maybe we should add a check to our language server to only load Prettier if it's > 3.0, hmm

Princesseuh commented 1 year ago

Let's keep issues about Prettier not working in https://github.com/withastro/language-tools/issues/621

zanhk commented 3 months ago

I do have the same problem with latest versions

Error [ERR_REQUIRE_ESM]: require() of ES Module c:\Users\ZanK\.vscode\extensions\astro-build.astro-vscode-2.14.0-win32-x64\node_modules\prettier-plugin-astro\dist\index.js from d:\repositories\majestico\insertadental\node_modules\prettier\index.js not supported.
Instead change the require of c:\Users\ZanK\.vscode\extensions\astro-build.astro-vscode-2.14.0-win32-x64\node_modules\prettier-plugin-astro\dist\index.js in d:\repositories\majestico\insertadental\node_modules\prettier\index.js to a dynamic import() which is available in all CommonJS modules.
    at c._load (node:electron/js2c/node_init:2:13801)
    at d:\repositories\majestico\insertadental\node_modules\prettier\index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (d:\repositories\majestico\insertadental\node_modules\prettier\index.js:38141:128)
    at Object.load [as loadPlugins] (d:\repositories\majestico\insertadental\node_modules\prettier\index.js:16147:23) {
  code: 'ERR_REQUIRE_ESM'
}
{
    "name": "@majesticostudio/insertadental.co.uk",
    "type": "module",
    "version": "0.0.1",
    "private": true,
    "repository": {
        "type": "git",
        "url": "https://github.com/majesticostudio/insertadental.co.uk.git"
    },
    "bugs": "https://github.com/majesticostudio/insertadental.co.uk/issues",
    "homepage": "https://github.com/majesticostudio/insertadental.co.uk",
    "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
        "astro": "astro",
        "wrangler:dev": "wrangler pages dev",
        "pwa:generate-assets": "pwa-assets-generator --preset minimal public/logo.svg"
    },
    "dependencies": {
        "@astrojs/alpinejs": "0.4.0",
        "@astrojs/check": "0.9.2",
        "@astrojs/cloudflare": "11.0.4",
        "@astrojs/markdoc": "0.11.3",
        "@astrojs/react": "3.6.2",
        "@astrojs/rss": "4.0.7",
        "@astrojs/sitemap": "3.1.6",
        "@astrojs/tailwind": "5.1.0",
        "@cloudflare/pages-plugin-mailchannels": "0.1.5",
        "@iconify/react": "5.0.2",
        "@keystatic/astro": "5.0.0",
        "@keystatic/core": "0.5.32",
        "alpinejs": "3.14.1",
        "astro": "4.14.2",
        "gsap": "npm:@gsap/business@3.12.5",
        "keen-slider": "6.8.6",
        "keystatic-components": "0.0.2",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "react-select": "5.8.0"
    },
    "devDependencies": {
        "@biomejs/biome": "1.8.3",
        "@bobthered/tailwindcss-palette-generator": "3.2.3",
        "@cloudflare/workers-types": "4.20240815.0",
        "@iconify-json/clarity": "1.1.14",
        "@iconify-json/ic": "1.1.18",
        "@iconify-json/iconamoon": "1.1.5",
        "@iconify-json/mdi": "1.1.68",
        "@iconify-json/ph": "1.1.14",
        "@iconify-json/solar": "1.1.10",
        "@tailwindcss/aspect-ratio": "0.4.2",
        "@tailwindcss/forms": "0.5.7",
        "@tailwindcss/typography": "0.5.14",
        "@types/alpinejs": "3.13.10",
        "@types/react": "18.3.3",
        "@types/react-dom": "18.3.0",
        "@vite-pwa/assets-generator": "0.2.4",
        "@vite-pwa/astro": "0.4.0",
        "astro-icon": "1.1.1",
        "astro-robots-txt": "1.0.0",
        "astro-seo": "0.8.4",
        "fluid-tailwind": "1.0.3",
        "satori": "0.10.14",
        "sharp": "0.33.5",
        "tailwindcss": "3.4.10",
        "typescript": "5.5.4",
        "workbox-window": "7.1.0"
    },
    "overrides": {
        "gsap": "npm:@gsap/business@3.12.5",
        "sharp": "0.33.5",
        "string-width": "4.1.0",
        "strip-ansi": "5.2.0"
    }
}
Princesseuh commented 3 months ago

You have a dependency that brings in an old version of Prettier. Not sure which one, but you can run npm why prettier perhaps to see

zanhk commented 3 months ago

Ok the problem seem to be on the package @astrojs/check which come by default in new astro installations, unistalling it got rid of the problem

maxchang3 commented 3 months ago

I receive the same error message as well.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/Max/.vscode/extensions/astro-build.astro-vscode-2.14.1-darwin-arm64/node_modules/prettier-plugin-astro/dist/index.js from /Users/Max/astro-next/node_modules/.pnpm/prettier@2.8.7/node_modules/prettier/index.js not supported.
Instead change the require of /Users/Max/.vscode/extensions/astro-build.astro-vscode-2.14.1-darwin-arm64/node_modules/prettier-plugin-astro/dist/index.js in /Users/Max/astro-next/node_modules/.pnpm/prettier@2.8.7/node_modules/prettier/index.js to a dynamic import() which is available in all CommonJS modules.
    at c._load (node:electron/js2c/node_init:2:13801)
    at /Users/Max/astro-next/node_modules/.pnpm/prettier@2.8.7/node_modules/prettier/index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (/Users/Max/astro-next/node_modules/.pnpm/prettier@2.8.7/node_modules/prettier/index.js:38141:128)
    at Object.load [as loadPlugins] (/Users/Max/astro-next/node_modules/.pnpm/prettier@2.8.7/node_modules/prettier/index.js:16147:23) {
  code: 'ERR_REQUIRE_ESM'
}

After checking with pnpm why prettier, I found that volar-service-yaml is using prettier@2.8.7 indirectly (might be related to #915 ?)

# Max in ~/astro-next on git:main x [22:12:35] 
$ pnpm why prettier
Legend: production dependency, optional only, dev only

astro-next@0.0.1 /Users/max/astro-next

dependencies:
@astrojs/check 0.9.3
└─┬ @astrojs/language-server 2.14.1
  └─┬ volar-service-yaml 0.0.61
    └─┬ yaml-language-server 1.15.0
      └── prettier 2.8.7

As a temporary workaround, I’ve used pnpm.overrides in package.json to force prettier to v3.

niceEli commented 2 months ago 
Error [ERR_REQUIRE_ESM]: require() of ES Module c:\Users\niceEli\.vscode\extensions\astro-build.astro-vscode-2.14.2-win32-x64\node_modules\prettier-plugin-astro\dist\index.js from c:\Users\niceEli\Documents\GitHub\neTech_resume\node_modules\prettier\index.js not supported.
Instead change the require of c:\Users\niceEli\.vscode\extensions\astro-build.astro-vscode-2.14.2-win32-x64\node_modules\prettier-plugin-astro\dist\index.js in c:\Users\niceEli\Documents\GitHub\neTech_resume\node_modules\prettier\index.js to a dynamic import() which is available in all CommonJS modules.
    at c._load (node:electron/js2c/node_init:2:13801)
    at c:\Users\niceEli\Documents\GitHub\neTech_resume\node_modules\prettier\index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (c:\Users\niceEli\Documents\GitHub\neTech_resume\node_modules\prettier\index.js:38141:128)
    at Object.load [as loadPlugins] (c:\Users\niceEli\Documents\GitHub\neTech_resume\node_modules\prettier\index.js:16147:23) {
  code: 'ERR_REQUIRE_ESM'

still continues to happen

"dependencies": {
  "@astrojs/check": "^0.9.3",
  "astro": "^4.15.4",
  "prettier-plugin-astro": "^0.14.1",
  "typescript": "^5.5.4"
},
"devDependencies": {
  "daisyui": "^4.12.10"
}