ota-meshi/eslint-plugin-astro

Trouble with prettier (Parsing error: `import` can only be used in `import()` or `import.meta`)

Closed this issue · 1 comments

tschaub commented

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.50.0

What version of eslint-plugin-astro are you using?

0.29.0

What did you do?

Configuration 
{
  "extends": [
    "planet"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "import/named": "off",
    "import/default": "off",
    "import/no-unresolved": [
      "error",
      {
        "ignore": [
          "astro:content",
          "@astrojs/*"
        ]
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "*.astro"
      ],
      "extends": [
        "plugin:astro/recommended"
      ]
    },
    {
      "files": [
        "*.jsx"
      ],
      "extends": [
        "planet/react"
      ],
      "rules": {
        "import/named": "off"
      }
    },
    {
      "files": [
        "*.mdx"
      ],
      "extends": [
        "plugin:mdx/recommended",
        "planet/react"
      ]
    }
  ]
}
---
import '../styles/global.css';

const {frontmatter} = Astro.props;
const title = (frontmatter && frontmatter.title) || Astro.props.title;
---

<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href={import.meta.env.BASE_URL}>@planet/maps</a></li>
        <li><a href={`${import.meta.env.BASE_URL}examples/`}>examples</a></li>
      </ul>
    </nav>
    <h1>{title}</h1>
    <slot />
  </body>
</html>

What did you expect to happen?

I upgraded from Astro 2 to 3 (see https://github.com/planetlabs/maps/pull/278/files), and expected the linter configuration to continue working.

What actually happened?

# npx eslint site/src/layouts/BaseLayout.astro

/Users/tim/projects/maps/site/src/layouts/BaseLayout.astro
  2:2  error  Parsing error: `import` can only be used in `import()` or `import.meta`  prettier/prettier

Link to Minimal Reproducible Example

https://github.com/planetlabs/maps/pull/278/files

Additional comments

I know this is not a minimal preproduction, I'll see if I can create one. But before upgrading to Astro 3, the linter configuration was working using this plugin together with eslint-plugin-prettier. After upgrading to Astro 3, the linter can no longer parse *.astro files.

I imagine this has to do with the parser or parserOptions that are being used, but I cannot figure out a combination that works. So far, the only solution I have found is to disable the prettier/prettier rules when using this eslint-plugin-astro plugin.

I see that the readme suggests turning the prettier/prettier rules off: https://github.com/ota-meshi/eslint-plugin-astro/blob/v0.29.0/README.md?plain=1#L165-L172

Is anyone successfully using this plugin together with Prettier and Astro 3?

ota-meshi commented

The prettier/prettier rule has nothing to do with this plugin. Perhaps you should open the issue in another repository.
The branch you shared doesn't seem to exist anymore and I couldn't debug it.