Parsing error with <img> tag

[terrymun]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

2.0.5

Link to runnable example

No response

Steps to reproduce

When using the <img> tag in a MDX file, certain props results in the error message "Parsing error: Expected value to be truthy" being encountered when linting, despite using the default setup for eslint:

{
  "files": ["*.stories.mdx"],
  "extends": ["plugin:mdx/recommended"]
}

If an <img> tag only contains src,altandtitle` attributes, then all is good:

import { Meta } from '@storybook/addon-docs';

<Meta title="Test" />

# Test

Lorem ipsum dolor sit amet.

<!-- All good -->
<img
  src="https://via.placeholder.com/250x250"
  alt=""
  title=""
/>

However, auditing any additional properties, such as width, height, loading, style, and also events such as onClick, onLoad, onError (the list is non-exhaustive) will all trigger the same parsing error message. Any props after the line break in the example below will trigger the error:

import { Meta } from '@storybook/addon-docs';

<Meta title="Test" />

# Test

Lorem ipsum dolor sit amet.

<img
  src="https://via.placeholder.com/250x250"
  alt=""
  title=""

  className="my-image"
  width={250}
  height={250}
  loading="eager"
  style={{ display: 'block' }}
  onLoad={() => console.log('onLoad')}
  onError={() => console.log('onError')}
  onClick={() => console.log('onClick')}
/>

Expected behavior

Valid uses of <img> props and handlers should not trigger eslint parsing error.

Actual behavior

Valid uses of <img> props and handlers triggers eslint parsing error. Attributes that I have tested so far that will not trigger the error:

• src
• srcSet
• alt
• title

Attributes that will trigger the error if one or more are present:

• className
• tabIndex
• width
• height
• loading
• style
• onLoad
• onError
• onClick
• … and more

Runtime

Node v16

Package manager

yarn v3

OS

macOS

Build and bundle tools

Next.js

[JounQin]

Can you provide a minimal reproduction repo?

[ch264]

I get this error when no 'alt' tag is provided

[JounQin]

Minimal reproduction:

<img alt="" src="https://via.placeholder.com/250x250" />

Workaround for now: move empty props to end:

<img src="https://via.placeholder.com/250x250" alt="" />