Case difference between hast and react in MDX

[samrobbins85]

I'm getting syntax errors for strokeLineCap and strokeLineJoin when using remark-autolink-headings with React.

My program flow is that I am using remark-autolink-headings to add links to the headings, and I want to add an icon. The recommendation for this is to use the content key and pass in a HAST tree. I make this using hastscript/svg.

hastscript/svg uses property-information which has an option hastToReact to change these names, but from what I can tell this option isn't passed through to hastscript.

[ChristianMurphy]

@samrobbins85 could you share your full pipeline?
Preferably in like https://npm.runkit.com or https://codesandbox.io ? or alternatively in a language flagged code fence?

It sounds like you have some customization around both remark-autolink-headings and potentially on hastscript.
Without known what that customization is, it's hard to advise.

[ChristianMurphy]

The same properties also come through when camel cased instead of kebab cased

import React from "react";
import unified from "unified";
import remarkParse from "remark-parse";
import remarkSlug from "remark-slug";
import remarkAutolinkHeadings from "remark-autolink-headings";
import remarkRehype from "remark-rehype";
import rehypeReact from "rehype-react";
import s from "hastscript/svg";

function link() {
  return s(
    "svg.icon",
    {
      ariaHidden: "true",
      viewBox: [0, 0, 24, 24],
      focusable: false,
      width: 18,
      height: 18,
      fill: "none",
      className: "stroke-current text-gray-600"
    },
    s("path", {
      strokeLinecap: "round",
      strokeWidth: 2,
      strokeLinejoin: "round",
      d:
        "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
    })
  );
}

export default function App() {
  return (
    <div className="App">
      {
        unified()
          .use(remarkParse)
          .use(remarkSlug)
          .use(remarkAutolinkHeadings, {
            behavior: "append",
            properties: {
              ariaLabel: "Link to self",
              className: ["anchor"]
            },
            content: link()
          })
          .use(remarkRehype)
          .use(rehypeReact, { createElement: React.createElement })
          .processSync("# heading").result
      }
    </div>
  );
}

see: https://codesandbox.io/s/frosty-wind-u3wll

[ChristianMurphy]

Hopefully this can point in the right direction,
if you still see an issue please follow the recommendations from

could you share your full pipeline?

and

Please also share how and where that goes to react

so that we can offer further guidance.

[samrobbins85]

Sorry it's a bit messy, but this is my full pipeline through MDX https://github.com/samrobbins85/notes-site/blob/master/lib/lecture.js. I tried using rehype-react but didn't get any difference

[wooorm]

Thanks for that information. That’s an issue with MDX, similar to mdx-js/mdx#1048. It’s solved on the next branch, which you can use already, or otherwise will be released as MDX@2.

[samrobbins85]

Thanks very much for all your help!