RFC: Raw file imports without webpack-specific syntax
Created by: gaearon
Update: here's my latest thinking on this: https://github.com/facebookincubator/create-react-app/issues/2961#issuecomment-356256234. This comment is old.
Currently we can't unambiguously tell how you want to treat a random file so we fall back to the simplest behavior for everything except JS and CSS. For example if you import file.md or file.svg we give you a URL to it because we don't know for sure what you need to do with it.
This works for many cases but can be annoying when you want to treat a file like data. For example, https://github.com/facebookincubator/create-react-app/issues/1388 describes a use case for importing SVG as a React component, and https://github.com/facebookincubator/create-react-app/issues/595 describes a use case for loading Markdown files.
We don't want to use Webpack loader syntax for this because it is Webpack-specific and other tools don't understand it. However I now realized we might not need to.
What if we determined this by file extension instead? For example,
import docs from './docs.raw.md';
import iconSVG from './icon.raw.svg';Sure, this means you have to encode how the file is used into the file itself, and also need to have control over it. For example this wouldn't work if you wanted to import SVG from an npm package. But on the other hand this doesn't work anyway, so at least this doesn't make it worse, but provides an escape hatch for cases when you need that extra option.
This approach is consistent with other cases where we might look at filenames. For example there is an ongoing proposal to use .module.css for opting into CSS modules.
What do you think?