How To Get Custom React Babel Pragma To Pass String As Argument Rather Than Function

As a follow up to How to create your own babel processor alternative to `React`, I am getting this error: react-dom.development.js:506 Warning: The tag is unrecognized in this br

Solution 1:

As far as I know, you'll have to modify @babel/plugin-transform-react-jsx to do that. By default, it assumes initially-capped tags are components (functions/classes), and lower-case tags are HTML tag names. It passes components directly to the function identified by the pragma configuration parameter (React.createElement(Foo) by default, for instance) but HTML tag names as strings (React.createElement("div")). The plugin doesn't list any configuration option for altering that behavior, so if you want it, you'll have to fork the plugin and modify it to work the way you want it to work.