options.namedExport not being honored with core api?

[acao]

First of all, amazing project! Thank you for creating this!

🐛 Bug Report

@svgr/core does not appear to be honoring namedExport in the latest release, or even honoring the default value. perhaps I am mistaken as to how the core API works compared to, say, the webpack loader by default.

I'm using the very useful and simple esbuild-plugin-svgr , and patched it to do this, just to illustrate the issue:

module.exports = (options = {}) => ({
    name: 'svgr',
    setup(build) {
        const svgr = require('@svgr/core').default;
        const fs = require('fs');

        build.onLoad({ filter: /\.svg$/ }, async (args) => {
            const svg = await fs.promises.readFile(args.path, 'utf8');
            const contents = await svgr(svg, { ...options });

            const appendedContents = `${contents}\nexport const ${options.namedExport || 'ReactComponent'} = SvgComponent;`
            return {
                contents: appendedContents,
                loader: 'jsx',
            };
        });
    },
});

for context, here I'm providing the options.namedExport to esbuild

(previously, as you can see, the plugin just returns the resultant contents directly.)

I attempted to debug the svgr babel transform for a bit, but couldn't find where opts.namedExport was being ignored or why the named export wasn't even being appended at all, and couldn't fathom in time what previousExport was about besides maybe preventing duplicates? I can take a deeper look next week!

Perhaps the svgr/core module doesn't return a named export by default, even if `namedExport' is provided, and there's another config I've overlooked? Will look at how the loader works.

The oddest part is that I'm using the webpack module and the core module side by side (the former for storybook), same versions of svgr using resolutions, and the webpack module is still adding the default namedExport value of ReactComponent, whereas this transparent esbuild plugin using core directly is not.

To Reproduce

const contents = await svgr(svgString, { namedExport: 'MyNamedExport' });
console.log(contents.includes('MyNamedExport')) // false

const contents = await svgr(svgString);
console.log(contents.includes('ReactComponent')) // false

Expected behavior

const contents = await svgr(svgString, { namedExport: 'MyNamedExport' });
console.log(contents.includes('MyNamedExport')) // true

const contents = await svgr(svgString);
console.log(contents.includes('ReactComponent')) // true

Link to repl or repo (highly encouraged)

Will add soon!

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

[open-collective-bot]

Hey @acao 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gregberge]

#584 seems to fix it.