Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: explicit named imports for non-JS/CSS assets

See original GitHub issue


We currently allow you to do this:

import logo from './logo.png';

After getting used to it, you’ll probably be comfortable with this giving you a URL.

But what about other types? For example, what should this return?

import doc from './';

Markdown source? Compiled HTML? An AST?

What about this?

import Icon from './icon.svg';

Should this give you a link? The SVG content? A React component?

The usual answer is “decide it for yourself in the configuration file”. However, that doesn’t work for CRA so we decided to treat all unknown extensions as URL imports. This is not ideal because in some cases it just doesn’t make any sense, and in others there are advanced (but still relatively common) use cases that aren’t satisfied.


What if we allowed to user to pick what they want, from a limited supported subset per filetype?

import { url as logoUrl } from './logo.png';
import { html as docHtml } from './';
import { ReactComponent as Icon } from './icon.svg';

Named imports are checked by webpack so you’d get a compile error if you use an unsupported one.

Things that are unused will be tree shaken so if you only use e.g. HTML of Markdown files, their source won’t be bundled. Same for SVGs (whether you consume them as raw source, URLs, or React components).

Other zero-configuration tools can also adopt this approach.


  • What do we do with the default import? Ideally I’d like to forbid it for anything other than JS/CSS because the intent is not clear for asset files (which version do you get?) We could do this with a lint rule.
  • If we make the breaking change, how do we update the consumers? We could write a codemod (it should be very simple).
  • It would be nice to coordinate this across at least a few other projects (e.g. @ndelangen Storybook). Maybe @KyleAMathews (Gatsby) @devongovett (Parcel) @rauchg (Next) would also be interested? I imagine we’ll need to write a multi-file Webpack loader for this, but I don’t see why other bundlers couldn’t adopt a similar convention.
  • Build performance: generating all possible content variations can be too slow. Ideally it would be nice if loaders had information about which import was used.


Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:240
  • Comments:62 (22 by maintainers)

github_iconTop GitHub Comments

xAlien95commented, Jan 28, 2019

Is there currently a workaround with CRA to get file contents as a string?

@dmwyatt, you can use a babel-plugin-macro such as raw.macro.

import raw from 'raw.macro';

const markdown = raw('./');

File contents will be bundled within main.[hash].chunk.js.

devuxercommented, Feb 11, 2019

@gaearon, Is this still under consideration?

Read more comments on GitHub >

github_iconTop Results From Across the Web

what does babel-plugin-named-asset-import do - Stack Overflow
Looks like its purpose is to import named exports from non JS/CSS assets. Currently, within the CRA, it appears to only be implemented...
Read more >
Exports and Imports and Defaults, Oh My! - DEV Community ‍ ‍
Without a default export, I need to explicitly name what I'm looking to import. That's why it's called a named import in ES6....
Read more >
Importing into the United States A Guide for Commercial ...
A licensed customs broker named in a CBP power of attorney may make entry on ... Reasonable care is an explicit responsibility on...
Read more >
import - JavaScript - MDN Web Docs - Mozilla
Given a value named myExport which has been exported from the module my-module either implicitly as export * from 'another.js' ) or explicitly...
Read more >
Python import: Advanced Techniques and Tips
There's an equivalent absolute import statement in which you explicitly name the current package: from world import africa. In fact, all imports in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found