Error: Invalid character in name

[Muhammad-Fiqri]

[smmoosavi]

Can you add more context? what is in RSSPage that causes the error?

[ericman314]

I'm also getting this error. I'm using React 18 with vite. I think the way JSX is transformed and used in react and vite has changed considerably since this library was last updated, and the @jsx JSXXML pragma appears to have no effect. Vite is transforming the jsx the "regular" way as if it is going to be rendered by react, and that generated code doesn't work with jsx-xml.

Here is my testXml.tsx (straight from the README):

/** @jsx JSXXML */
import { render, JSXXML } from 'jsx-xml'

const xml = render(<test x="3">1 = {2} = 3</test>)
console.log(xml)

Here is where the error is thrown deep in xmlbuilder:

Here is the object that is passed to xmlbuilder.create:

You can see that the jsx is being transformed for use with react, and JSXXML isn't being invoked at all.

In theory, it should be possible to make this work using a custom JSX import source. You could rename the file containing the XML with a different extension not used by vite's regular react transformer, such as .jsxml, and then add a custom plugin to the vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    react({ include: ['**/*.jsxml'], jsxImportSource: 'jsx-xml' }),
    ...
  ]
})

Assuming that jsx-xml could be updated to provide these imports as described in https://esbuild.github.io/api/#jsx-import-source:

import { createElement } from "your-pkg"
import { Fragment, jsx, jsxs } from "your-pkg/jsx-runtime"
import { Fragment, jsxDEV } from "your-pkg/jsx-dev-runtime"

OR, maybe it's much simpler than this. Perhaps JSXXML just needs to be updated to be able to understand the object that the JSX is being transformed into in this latest version of react/vite?

{
    "type": "test",
    "key": null,
    "ref": null,
    "props": {
        "x": "3",
        "children": [
            "1 = ",
            2,
            " = 3"
        ]
    },
    "_owner": null,
    "_store": {}
}

[smmoosavi]

Thanks for the good declaration of the issue and hints about jsx-runtime.

I will investigate the problem this week.

[smmoosavi]

I just published a beta version that understands React JSX. check jsx-xml@beta