RFC: Raw file imports without webpack-specific syntax

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?

---

Update: here’s my latest thinking on this: https://github.com/facebookincubator/create-react-app/issues/2961#issuecomment-356256234. This comment is old.

[callil]

Just want to add that the lack of something like import md from 'raw-loader!./file.md'; in create-react-app has been the only cause of my needing to npm eject so something that handles this would be great. Async is just too much of a performance hit.

I don’t like the idea of changing the file name because it makes any workflow that’s outside of create-react-app a pain. For instance working with .md or .svg in tools that handle them would be made that much more difficult.

I’m with @jimniels & @ArmorDarks

[ArmorDarks]

I’m not very familiar with Webpack itself, but maybe some ideas from SystemJS plugin-raw can be taken.

Syntax for import looks quite elegant and straight-understandable:

import docs from './docs.md!raw';

And ESLint is happy with that. I never checked, though, does ! loaders meta-information is a part of import specs, or just a specific to SystemJS thing.

I think the main issue with import docs from './docs.raw.md'; is that it makes assumptions in a wrong direction. Just think of that — when you add a file to repository, do you think in advance “yeah, I will import that thing as raw, I need to add special extension for that”?

This extension becomes even more obscure, when you look at the file outside of CRA environment (which isn’t unusual situation). Why that file have that strange .raw part? Can I remove it?

Example with module.css isn’t that relevant here, since module.css isn’t useful on its own, it is specific subset of CSS Modules, of CSS, while when it comes to other files, they are useful standalone units, which can be used in other environments, outside of CRA, for different things. Marking them in advance with .raw doesn’t make much sense.

For instance, I need project README.md. Should I now rename it to README.raw.md just because I need it raw? After all, it will break Github expectations (didn’t check, though, maybe it still would be able to pick up the file).

I think it would be at least somehow less confusing, if something like that would be possible to do:

import docs from './docs.md.raw';

Where docs.md is real filename, and .raw is a specific meta-marker. But it makes it quite close to !raw.