SVG identifier is not declared in Babel's scope tracker as a JavaScript value binding

[oleg-rdk]

First of all, thanks for your work!

Starting from Babel 7.5.2 (#10174 specifically), console.warnings started to appear when using this plugin.

It seems babel-plugin-inline-react-svg should be tweaked a bit to get rid of that warning.

I'll try to find a solution, but it probably will take a lot of time for me to get familiar with the plugin and babel internals. So, if it's smth that could be done easily - I would appreciate your help.

Here I found some related links that might be helpful:

• issue in babel on same problem - How to resolve the warning when use @babel/plugin-transform-typescript to compile typescript babel/babel#10264
• here is an equivalent fix to the one that should be done here, but for another plugin - fix: babel 7.5, fixes #1292 gaearon/react-hot-loader#1293

Thanks!

[ljharb]

Seems like a PR that registers the variable (only when that API is present) would be a good patch release?

Could you provide the specific warnings you see?

[oleg-rdk]

@ljharb agree on patch!

I've spent about 2 hours trying to figure out what should it be but didn't make any progress since am a newbie to babel plugin development (I've started with handbook). Also struggled to find any docs about scope.registerDeclaration from warning below - if you can point me to them - would be great! So I can give it 2nd try

The warning:

The exported identifier "Favorite" is not declared in Babel's scope tracker
as a JavaScript value binding, and "@babel/plugin-transform-typescript"
never encountered it as a TypeScript type declaration.
It will be treated as a JavaScript value.

This problem is likely caused by another plugin injecting
"Favorite" without registering it in the scope tracker. If you are the author
 of that plugin, please use "scope.registerDeclaration(declarationPath)".

Favorite is a name of the default export of from svg file

[ljharb]

https://github.com/airbnb/babel-plugin-inline-react-svg/blob/master/src/index.js#L140 is one example of something being registered on the scope. does that help?

[oleg-rdk]

@ljharb I did some changes here #77 Could you please have a brief look?

I also would like to ensure I didn't break anything by those changes so I was thinking about writing snapshot tests for resulted code (with Jest or smth) before merging that PR. Wdyt?

[ljharb]

Although snapshot tests are brittle and a terrible way of testing, we're already doing that here: https://github.com/airbnb/babel-plugin-inline-react-svg/blob/master/test/sanity.js Please do add that style of tests.

[ElliotChong]

@oleg-rdk thanks for the PR! I'm recently hitting this issue as well, would you like any help getting that PR over the finish line?