Svgr: Trying to use babel plugins

[VincentCATILLON]

🐛 Bug Report

I'm trying to use your babel plugin, to be able to parse my SVG files as components at runtime.
Your project is awesome, but you don't have any documentation about Babel plugins, that's very sad.

So I tried to do that:

• I add your plugin to my project and use it in my babel config file, when I start my packager (using Metro so):

error: bundling failed: TypeError: Property name expected type of string but got null
    at validate (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/definitions/utils.js:165:13)
    at Object.validate (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/definitions/utils.js:177:7)
    at validate (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.Identifier (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/builders/generated/index.js:305:31)
    at PluginPass.Program (/Users/vincent.catillon/workspace/mobile/node_modules/@svgr/babel-plugin-transform-svg-component/lib/index.js:31:26)
    at newFn (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/traverse/lib/path/context.js:40:17)

React-Native: 0.56.4
Babel 7

To Reproduce

Create a RN project, and modify the .babelrc file to have this:

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    [
      "@svgr/babel-plugin-transform-svg-component",
      {
        "native": true,
        "state": {}
      }
    ],
    "@svgr/babel-plugin-transform-react-native-svg"
  ]
}

And then, when i define componentName property in my .babelrc file (in state object):

error: bundling failed: TypeError: @babel/template placeholder "$3": Property body of ArrowFunctionExpression expected node to be of a type ["BlockStatement","Expression"] but instead got null
    at Object.validate (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/definitions/utils.js:130:13)
    at Object.validate (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at applyReplacement (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/template/lib/populate.js:112:9)
    at metadata.placeholders.slice.reverse.forEach.placeholder (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/template/lib/populate.js:42:7)
    at Array.forEach (<anonymous>)
    at populatePlaceholders (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/template/lib/populate.js:40:43)
    at arg (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/template/lib/literal.js:37:53)
    at Function.ast (/Users/vincent.catillon/workspace/mobile/node_modules/metro/node_modules/@babel/template/lib/builder.js:56:29)
    at defaultTemplate (/Users/vincent.catillon/workspace/mobile/node_modules/@svgr/babel-plugin-transform-svg-component/lib/index.js:17:22)

Expected behavior

I'd like to have my component well loaded, as it can be done using the @svgr/cli.

Environment

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 662.27 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 8.12.0 - /usr/local/bin/node
 - Yarn: 1.7.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman

[VincentCATILLON]

It seems that having a configuration without state, or state without componentName property will throw errors.

Maybe we should use expandState() method in @svgr/core/src/state file to prevent this.

[gregberge]

Hello @VincentCATILLON, I am sorry but this plugin is not designed to be used out of SVGR that's why you have some problem to make it work alone. Please use SVGR instead: https://www.smooth-code.com/open-source/svgr/docs/getting-started/.

[VincentCATILLON]

@neoziro is it in your roadmap to make usable elsewhere than svgr ? I mean that it would be great as a Babel transformer (changing svg input to react/react native component manipulating AST) in correlation with @svgr/core ofc.

[gregberge]

Yes it is in the roadmap to create a SVGR babel plugin, right now I don't have time to work on it but it is possible to create one!

[birdofpreyru]

Check this out: https://www.npmjs.com/package/@dr.pogodin/babel-preset-svgr - my solution for the problem:

1. npm install --save-dev @dr.pogodin/babel-preset-svgr.
2. Add @dr.pogodin/babel-preset-svgr to the list of presets in your Babel config.
3. Instruct babel to process SVG files. In case you use Babel CLI to compile entire directories, do SVG compilation as a separate pass with --extensions '.svg' --keep-file-extension flags.
4. Enjoy! :)