SVGR custom template variables undefined when used in import

103 Views Asked by At

In addition to creating a React component using an SVGR custom template, I'm trying to create a Storybook story to be generated alongside the component. The problem comes when I try to use the provided variable.componentName as a location for an import declaration in the template. Using componentName anywhere else in the template works as intended, it's only an issue when used with an import declaration. The template code is as follows:

const template = (variables, { tpl }) => {
  return tpl`
import type { Meta, StoryObj } from "@storybook/react";
import View from './${variables.componentName}';

type Story = StoryObj<typeof View>;

const meta: Meta<typeof View> = {
  component: View,
};

export default meta;

export const ${variables.componentName}: Story = {};
`;
};

module.exports = template

I receive the following CLI errors:

Failed to handle file: src/svgs/example-icon.svg

followed by

Error: /Users/.../icons/src/svgs/example-icon.svg: Unknown substitution "$$BABEL_TPL$1" given ...

What can I do to fix this?

For what it's worth, the following is the script I'm running:

"generate": "svgr --out-dir ./src/components --template ./src/templates/Component.js ./src/svgs --typescript --jsx-runtime 'automatic' && svgr --out-dir ./src/components --template ./src/templates/Story.js ./src/svgs --ext stories.tsx --typescript",
0

There are 0 best solutions below