Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom template variable undefined when used as location for import declaration #931

Open
adamfratino opened this issue Dec 29, 2023 · 0 comments

Comments

@adamfratino
Copy link

adamfratino commented Dec 29, 2023

🐛 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant