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",