CODEWITHSUNDEEP
javascriptreactjsbabeljs
Lance Pollard
Lance Pollard

Reputation: 79420

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 browser. If you meant to render a React component, start its name with an uppercase letter.

  • in foo
  • in Unknown
  • in Bar

If I make it a capital letter, then this error:

Uncaught ReferenceError: Foo is not defined

I'm guessing this is because it's passing it as a function like this:

React.createElement(Foo)

My question is, how to get it to pass it as a string?

MyThing.create('Foo')

I would like to know how to do it with both capital and lowercase letters.

Upvotes: 0

Views: 577

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075139

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.

Upvotes: 1

Related Questions