The plugin does not co-operate with babel-plugin-module-resolver

[birdofpreyru]

Resolution of svg path with the code

const svgPath = resolveFrom(dirname(iconPath), path.node.source.value);

does not take into account any path aliases configured with help of babel-plugin-module-resolver.

[birdofpreyru]

Oops... I guess, I just have not configured it properly. Sorry.

[birdofpreyru]

After playing around for some more time, I believe, this is still a valid issue. The problem is that babel-plugin-module-resolver resolves import paths on exit from a node, thus no matter what is the order of Babel plugins in the config, babel-plugin-inline-react-svg is executed before babel-plugin-module-resolver, thus it does not use path aliases from the resolver.
I have tried to update babel-plugin-inline-react-svg to act on the exit from a node, after the resolver, but then Babel attempts to parse .svg content before babel-plugin-inline-react-svg has a chance to properly transform it. Unfortunately, my knowledge of Babel plugin internals is close to zero, so I double, whether I can resolve this issue on my own :(

[tkh44]

@birdofpreyru a quick hack would be to create a babel preset because they run after plugins.

// preset.js
const inlineSvg  = require('babel-plugin-inline-react-svg')
export default {
  plugins: [
    inlineSvg
  ]
};

http://babeljs.io/docs/plugins/#plugin-preset-ordering

[kesne]

Yeah this is a plugin ordering issue, and I don't know a good way to resolve it.

[Zaggen]

@tkh44 Tried that and didn't work, it partially worked (at least it the code broke somewhere else) when I also added "passPerPreset": true, so I'm not sure if it was a theoretic fix or it actually worked for you, if so could you please share the full configuration code? :).

On the other hand I've created a pull request to allow passing an alias configuration to the plugin so it can be used on in conjunction with babel-plugin-module-resolver without issues. I've only tested for my use case so some testing would be needed if @kesne accepts the pull request.

Pull request: #17

[goranovs]

Anything new here? Any alternative for React SVGs with babel and alias paths?

[birdofpreyru]

@goranovs I ended up creating my own Babel preset for SVG transformation: @dr.pogodin/babel-preset-svgr.

• Out of the box it works with module resolver, or any other Babel plugin fiddling with paths;
• It does not break Hot Module Reloading (HMR) of SVGs (it is broken with babel-plugin-inline-react-svg, because inlining hides the actual SVG files from Webpack watcher);
• For the actual transformation it relies on SVGR library, which nowadays is by far the most popular way to include SVGs into React apps, used by many, including Create React App. Surprisingly, SVGR itself did not provide a preset to use it directly from Babel compilation process, that's why I created my own preset to fill this gap :)