create-react-app (TypeScript) .babelrc throwIfNamespace=true setting

Question

thought this would be simple but it's not. I generated a simple app with the latest create-react-app. Adding a <gcse:search> tag and getting the following:

Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.
  16 |         return (
  17 |             <div className="comptext">
> 18 |                 <gcse:search defaultToRefinement="mostly-center"></gcse:search>
     |                  ^
  19 |             </div>
  20 |         );

.babelrc is:

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "throwIfNamespace": false
            }
        ]
    ]
}

I've tried multiple .babelrc configurations, "babel" key in package.json, even tried including .bablerc.js. No change

I'd prefer to not eject this, if possible.

What am I missing?

Can you look at [this SO question](https://stackoverflow.com/questions/41577801/how-to-include-google-custom-search-box-in-an-react-component) it seems to solve problem without eject. — Matvii Hodovaniuk, Feb 21 '19 at 08:50
Same problem. `.babelrc` file is parsed, but this flag is ignored. If namespace is in xml, namespace not supported error is shown while try to use svg. — azendh, Jan 22 '22 at 16:10

score -2 · Answer 1 · edited Apr 05 '20 at 00:24

-2

You need to set it as follow:

"throwIfNamespace"`: false in file `@babel/preset-react/index.js

edited Apr 05 '20 at 00:24

william.eyidi

2,315
4
27
39

answered Apr 04 '20 at 21:34

Sachin J

9
3

create-react-app (TypeScript) .babelrc throwIfNamespace=true setting

1 Answers1