Does it support the automatic mode of react 17?

[harxki]

💬 Questions and Help

In react 17, new transforms have been added.

In react 17, the import React from "react" declaration is no longer required. So in my project, I removed the import React from "react" declaration from the svgr template. Then I got the error React is not defined.

export const template: any = (
  { template }: any,
  _: any,
  { componentName, props, jsx }: any,
): any => template.ast`
    import React from 'react'; // i want to remove this declaration
    import { Icon } from '. /ui/Icon';

    const ${componentName} = (${props}) => ${jsx}
    ${componentName}.defaultProps = Icon.defaultProps;
    export default Icon.withComponent(${componentName});
  `;

Is it possible that svgr does not support react 17?

[open-collective-bot]

Hey @harxki 👋,
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 ❤️.

[gregberge]

Hello @harxki, #613 takes care of it. Not released yet, but will be part of the next v6-alpha.

[gregberge]

@harxki released as alpha, interested by your feedback! #613

[harxki]

@gregberge
Thanks for the release.
I've tried it in my project and I'm getting the following error.

ModuleBuildError: Module build failed (from ./node_modules/@svgr/webpack/dist/index.js):
TypeError: convert__default.default is not a function

The following is a template.

// "@svgr/webpack": "6.0.0-alpha.2"

export const svgrTemplate: any = (
  { template }: any,
  _: any,
  { componentName, props, jsx }: any,
): any => template.ast`
    import { Icon } from '../../components/ui/Icon';

    const ${componentName} = (${props}) => ${jsx}
    ${componentName}.defaultProps = Icon.defaultProps;
    export default Icon.withComponent(${componentName});
  `;

[gregberge]

Try to upgrade every packages and to use the new templates API. In releases you will find details about it.