Custom template breaking in @svgr/webpack

[caseycallow]

Hi there, we're having some issues upgrading to 2.0.0, particularly with our custom template that worked great in 1.10.0. I'm eager to update and get this working again.

This is our template file that used to work to extend our base Icon component.

module.exports = () => {
  return (code, state) => `import React from 'react';
    import PropTypes from "prop-types";
    import Icon from "../src/components/Icon/Icon";

    const ${state.componentName} = ({ ...props }) => {
      return <Icon {...props}>${code}</Icon>;
    };

    export default ${state.componentName};`;
};

Current Behavior: Renders plain SVG, without any of the template or props getting applied.

Expected behavior: Rendered SVG is wrapped inside our Icon markup with props and classnames applied.

Does 2.0.0 make any API changes to the template? I'm struggling to find documentation or examples to follow if so. Thanks for your time!

[gregberge]

Yes templates changed!

You can take inspiration from the default template, sorry!

[caseycallow]

Any ideas on how to get this working? This is compiling without errors but the template still isn't applying. I moved the getProps function from "utils" into the file and wrapped it in module.exports as per #5. It fails silently so it's pretty hard to debug this. Any tips would be much appreciated!

module.exports = () => {
  const getProps = config => {
    const props = [];
    if (config.ref) props.push("svgRef");
    if (config.titleProp) props.push("title");
    if (config.expandProps) props.push("...props");

    if (props.length === 0) return "()";
    if (props.length === 1 && config.expandProps) return "props";

    return `({ ${props.join(", ")}  })`;
  };

  const iconTemplate = (code, config, state) => {
    const props = getProps(config);

    let result = `import React from 'react';
    import PropTypes from "prop-types";
    import Icon from "../src/components/Icon/Icon";

    const ${state.componentName} = ({ ...props }) => {
      return <Icon {...props}>${code}</Icon>;
    };

    export default ${state.componentName};`;

    return result;
  };
};

[gregberge]

Try exporting the template directly?

(code, config, state) => {
    const props = getProps(config);

    let result = `import React from 'react';
    import PropTypes from "prop-types";
    import Icon from "../src/components/Icon/Icon";

    const ${state.componentName} = ({ ...props }) => {
      return <Icon {...props}>${code}</Icon>;
    };

    export default ${state.componentName};`;

    return result;
  }

[dPowNextdoor]

Can we please reopen this issue? This is still a problem with the latest version (6.2.1), where I cannot specify custom imports.

Neither this:

loader: '@svgr/webpack',
options: {
    ref: true,
    memo: true,
    babel: false, // I don't want my babel.config.js overwritten since it has better support for old browsers
    jsxRuntime: 'automatic', // React >= v17 doesn't need `import React from 'react'`
    exportType: 'named', // Try to force the React component to be exported via named `ReactComponent`
    // ...
    template(componentInfo, svgrConfig) {
        const astBuilder = babelTemplateBuilder`
            ${componentInfo.imports};

            ${componentInfo.interfaces};

            const ${componentInfo.componentName} = (${componentInfo.props}) => (
                ${componentInfo.jsx}
            );

            export default const FileUrl = '${svgrConfig.options.state.filePath}';

            ${componentInfo.exports};
            `;

        return astBuilder;
    },
}

Nor this:

loader: '@svgr/webpack',
options: {
    template(componentInfo, svgrConfig) {
        componentInfo.exports?.push(babelTemplateBuilder`
            const FileUrl = '${svgrConfig.options.state.filePath}';
            export { FileUrl as default };
        `);

        const astBuilder = babelTemplateBuilder`
            ${componentInfo.imports};

            ${componentInfo.interfaces};

            const ${componentInfo.componentName} = (${componentInfo.props}) => (
                ${componentInfo.jsx}
            );

            ${componentInfo.exports};
            `;

        return astBuilder;
    },
}

Nor even this:

loader: '@svgr/webpack',
options: {
    template(componentInfo, svgrConfig) {
        componentInfo.exports?.push(babelTemplateBuilder`
            export default const FileUrl = '${svgrConfig.options.state.filePath}';
        `);

        // const astBuilder = babelTemplateBuilder(template);
        const astBuilder = babelTemplateBuilder`
            ${componentInfo.imports};

            ${componentInfo.interfaces};

            const ${componentInfo.componentName} = (${componentInfo.props}) => (
                ${componentInfo.jsx}
            );

            ${componentInfo.exports};

            export default const FileUrl = '${svgrConfig.options.state.filePath}';
            `;

        return astBuilder;
    },
}

Will work in order to get (what should obviously be the default behavior of) fixing v6's behavior to match that of the original, correct, v5 behavior of import SvgUrl, { ReactComponent as SvgComponent } from '/path/to/my-file.svg'.

How would one do this? template clearly doesn't work and there isn't a way to modify the componentInfo.exports array nor specify multiple exportType config entries.