Parsing error when a component is used within a markdown list

[LeBenLeBen]

Subject of the issue

The following code:

- <LinkTo kind="docs-packages-vuetify-preset" story="page">
    Vuetify preset
  </LinkTo>
  : some extra text describing the preset

Trigger an error on line 3:

  </LinkTo>
    ^^^^^^
    Parsing error: '>' expected.

Adding an empty line between the last two lines fixes the issue, but the rendered output is not the same. Also putting it all in a single line works, but it’s not "Prettier compliant" and gets reformatted on multiple lines. If the same code is placed at the root (not within a markdown list), it works as well.

It does pretty much the same with a regular element instead of a component, but the error is different:

Parsing error: Identifier expected

Note that the code compiles properly, the problem is only at EsLint level.

Your environment

• OS: macOS 10.15.7
• Packages: eslint-plugin-mdx 1.9.0
• Env: Node 14.16.0, npm 6.14.11

[JounQin]

Please provide a minimal runnable reproduction.

[LeBenLeBen]

Here you go: https://github.com/LeBenLeBen/eslint-mdx-repro-279

npm install
npm run validate

[JounQin]

@wooorm I tried to parse the following:

- <div kind="docs-packages-vuetify-preset" story="page">
    Vuetify preset
  </div>
  : some extra text describing the preset

And logged console.log(jsxNodes[0], this.combineLeftJsxNodes(jsxNodes)) at https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/src/traverse.ts#L117

And the log is following:

{
  type: 'jsx',
  data: undefined,
  value: '<div kind="docs-packages-vuetify-preset" story="page">\n' +
    '  Vuetify preset\n' +
    '</div>',
  position: {
    start: { line: 1, column: 0, offset: 2 },
    end: { line: 3, column: 3, offset: 80 }
  }
}

{
  type: 'jsx',
  data: undefined,
  value: '<div kind="docs-packages-vuetify-preset" story="page">\n' +
    '    Vuetify preset\n' +
    '  </',
  position: {
    start: { line: 1, column: 0, offset: 2 },
    end: { line: 3, column: 3, offset: 80 }
  }
}

/Users/JounQin/Workspaces/GitHub/eslint-mdx/test/fixtures/jsx-text.mdx
  3:4  error  Parsing error: /Users/JounQin/Workspaces/GitHub/eslint-mdx/test/fixtures/jsx-text.mdx: Unexpected token (3:4)

  1 | <$><div kind="docs-packages-vuetify-preset" story="page">
  2 |     Vuetify preset
> 3 |   </</$>
    |     ^

✖ 1 problem (1 error, 0 warnings)

So it seems to be an issue of remark-mdx which produces incorrect offset.

[JounQin]

@LeBenLeBen Temporary workaround:

<!-- prettier-ignore -->
- <div kind="docs-packages-vuetify-preset" story="page">
    Vuetify preset
</div>
  : some extra text describing the preset

Sorry, I can't fix it easily due to remark-mdx itself. Let's wait for @wooorm's response.

[JounQin]

@wooorm I have to do something like following, I don't know if it is as expected:

combineLeftJsxNodes(jsxNodes: Node[], parent?: Parent): Node {
  const start = jsxNodes[0].position.start
  const end = { ...last(jsxNodes).position.end }
  // fix #279
  if (parent.type === 'listItem') {
    end.offset += parent.position.indent.reduce(
      (acc, indent, index) => acc + (index ? indent + 1 : 0),
      0,
    )
  }
  return {
    type: 'jsx',
    data: jsxNodes[0].data,
    value: this.code.slice(start.offset, end.offset),
    position: {
      start,
      end,
    },
  }
}

[wooorm]

Parsing it at least works on main, and maybe on the last v2 beta.

@JounQin posiiton.indent went away in the last remark btw.
Might it be time to investigate the new AST that’s on main already?

[JounQin]

@wooorm I'm fine to start working on next version, but I'd like to fix this error on current stable version too. I want to confirm if my fix will always work, or, can you patch a fix on remark-mdx@1 for the incorrect position info.

[wooorm]

I do not know if your fix will always work, maybe?
And I'm personally not interested in patching v1. I rewrote the parsing in april and in november, solving tons of issues. I'm not interested in again fixing things I already fixed

[JounQin]

@LeBenLeBen Please try v1.9.1

[LeBenLeBen]

Perfect, it works now. Thank you for looking into this so quickly 💯