Transform Error

[ihupoo]

I add the following code in my mdx

///demo.jsx
export default Demo = () => <></>

///mdx
import Demo from './demo.jsx'

<Demo  test='{test:"22"}' />

and went to an error

[vite] Internal server error: Transform failed with 1 error:
<stdin>:7:1427: error: Expected ">" but found "2"
  Plugin: vite-plugin-mdx

is the bug between the esbuild transform and mdx-js ?

[aleclarson]

Cannot reproduce with latest version of Vite and this plugin.

[ihupoo]

i used <Demo test=“{test:’22’}” /> and everything is ok... seems that the “ and ‘ is different

[aleclarson]

Can you reproduce in this example? https://github.com/brillout/vite-plugin-mdx/blob/master/examples/react/src/Hello.mdx

[ihupoo]

i am confused...

follow the example in vite-plugin-mdx/examples/react , it runs well when i use <Counter test='{"a":"dd"}' /> in Hello.mdx。 Then i upgrade @mdx-js/mdx to ^2.0.0-next.9 , it also runs well ...

I try to remove "vite-plugin-mdx": "file:../../" and use npm version "vite-plugin-mdx": "^3.3.2", the error happens when i open the browser. However there seems no break changes between them

This is my environment

system: window10

/// package.json
"dependencies": {
    "@mdx-js/mdx": "^2.0.0-next.9", 
    "@mdx-js/react": "^1.6.22",
    "@vitejs/plugin-react-refresh": "^1.1.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "vite": "^2.0.0-beta.65",
    "vite-plugin-mdx": "^3.3.2"
  }

/// Hellow.mdx
.....    <Counter test='{"a":"dd"}' />

[aleclarson]

Your @mdx-js/react version should match @mdx-js/mdx version.

[ihupoo]

Sorry, i forgot to use the lastest https://github.com/brillout/vite-plugin-mdx.git . I tried again by the following step.

1. run yarn in root and yarn build to create a dist package
2. cd ./examples/react and run yarn to install
3. change the Hellow.mdx --><Counter test='{"a":"dd"}' />
4. run yarn dev and open the browser

system: window10

[ihupoo]

oh, i think i know why.

The @mdx-js/mdx in "v2.0.0-next.8" transfer <Counter test='{sdf:"sdf"}' /> to <Counter test="{sdf:&quot;sdf&quot;}" mdxType="Counter" />

'/* @jsx mdx */\nimport { Counter } from './Counter.jsx';\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")\n  return <div {...props}/>\n};\n\nconst MDXLayout = "wrapper"\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...props} components={components} mdxType="MDXLayout">\n    <Counter test="{sdf:&quot;sdf&quot;}" mdxType="Counter" />\n  </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;'

And in v2.0.0-next.9, it changes to <Counter test="{sdf:\\"sdf\\"}" mdxType="Counter" />

'/* @jsxRuntime classic */\n/* @jsx mdx */\n/* @jsxFrag mdx.Fragment */\nimport {Counter} from './Counter.jsx';\nconst MDXLayout = "wrapper";\nfunction MDXContent({components, ...props}) {\n  return <MDXLayout components={components} {...props}><Counter test="{sdf:\\"sdf\\"}" mdxType="Counter" /></MDXLayout>;\n}\nMDXContent.isMDXComponent = true;\nexport default MDXContent;\n'

Sadly, the esbuild does not think it is a correct string in loader 'jsx' and throw the error

[aleclarson]

Subscribe to https://github.com/evanw/esbuild/issues/1115