Custom template variable undefined when used as location for import declaration

[adamfratino]

🐛 Bug Report

When creating a custom template with SVGR, I'm not able to use componentName as a location in an import declaration.

To Reproduce

Template code:

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

type Story = StoryObj<typeof View>;

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

export default meta;

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

module.exports = template

Script:

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

Expected behavior

The ExampleIcon.stories.tsx file should be generated successfully using componentName as the file location (i.e. import View from './ExampleIcon';.

After successfully creating an icon component from the first half of the script above, SVGR fails to create the stories.tsx file due to the following errors:

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

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

What am I missing?

---

## System:
 - OS: macOS 14.1.1
 - CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
 - Memory: 533.78 MB / 16.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.18.2 - /usr/local/bin/node
 - Yarn: 1.22.19 - /usr/local/bin/yarn
 - npm: 9.8.1 - /usr/local/bin/npm