App crashing with "Cannot read property 'name' of undefined" after installing plugin

[tremby]

I'd like to use this in my Nextjs project, where I'm using Typescript.

All I've done so far is install the plugin and add it under plugins to my .babelrc file. The app now crashes on start, with the message Cannot read property 'name' of undefined.

The file it references is one of mine but it seems to be a complete red herring: there's nothing in that file remotely to do with SVGs, and it doesn't look up the name property of anything. I haven't even added any statements importing SVG files yet.

I scanned through the source code and traced the error to babel-plugin-inline-react-svg/lib/index.js in the ExportNamedDeclaration function, specifically this line:

        if (node.specifiers.length > 0 && node.specifiers[0].local.name === 'default') {

I sprinkled logs around this, and this is definitely the line that's crashing. In this case node.specifiers.length is 1, but that first item has no local property. I get a lot of output when dumping this (I guess many instances of this are running in parallel? Most crash, a few don't since they have length 0 and so it doesn't try to look up .local.name for those), and here's one of the node.specifiers arrays, as rendered by console.log:

[
  Node {
    type: 'ExportNamespaceSpecifier',
    start: 685,
    end: 699,
    loc: SourceLocation { start: [Position], end: [Position] },
    exported: Node {
      type: 'Identifier',
      start: 690,
      end: 699,
      loc: [SourceLocation],
      name: 'Constants',
      leadingComments: undefined,
      innerComments: undefined,
      trailingComments: undefined
    },
    leadingComments: undefined,
    innerComments: undefined,
    trailingComments: undefined
  }
]

One tutorial told me to install babel-plugin-module-resolver. I've tried both with and without that and it's no different. My .babelrc looks like this:

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    ["module-resolver", {"root": ["."]}],
    "inline-react-svg",
  ]
}

I also tried without the styled-components plugin; no change there either.

I'm using Typescript 4.0.5, Babel 7.12.3, node 12.18.1.

[tremby]

I found a fix; will submit a PR...

[tremby]

Would love to see a release if possible!