Plugin likely needs filename when used with babel's transform

[danoc]

Hi, I've been working to upgrade Thumbtack's design system to Babel 7. Got stuck at babel-plugin-inline-react-svg with the error "Path must be a string. Received undefined." It failed because iconPath was undefined:

babel-plugin-inline-react-svg/src/index.js

Lines 47 to 48 in 7ba334c

	const iconPath = state.file.opts.filename;
	const svgPath = resolve.sync(importPath, { basedir: dirname(iconPath) });

This happened because I use babel.transform(code, opts). Previously, Babel would set filename: "unknown" in opts. This seems to have changed in Babel 7.

Here's a commit with a failing test case: https://github.com/danoc/babel-plugin-inline-react-svg/commit/82d475926fc6d5866f255e0b306295a84ab5c2e9. Adding filename: test/fixtures/test-import-read-file.jsx to opts (the second argument) fixes the test case.

I don't think this is a bug in babel-plugin-inline-react-svg, but these changes may be helpful:

• Throw an error if iconPath is undefined (before dirname(iconPath)).
• Update README example to include filename.

[ljharb]

I think both changes would be reasonable. A PR is most welcome.

[danoc]

Do you know happen to know what the recommended filename is? I'm working around this by using { filename: "unknown" }, restoring the previous babel behavior. Although that doesn't seem like the right solution. 😄

[ljharb]

It seems like, altho you can use the API programmatically, the svgPath code kind of expects you'll only use it on a file (ie, applyPlugin only takes a path).

I think the test case is great, but i think handling this properly might need a bit of refactoring. I'll open a PR with your test case once I've got a solution.

[ljharb]

ahhh - ok so, the filename is whatever the relative SVG file import should be computed against - so "unknown" won't really work either.

[danoc]

Yeah, it happens to work in my case but I think that's more of an accident.

[ljharb]

Fixed in #53.