Javascript: How to use JSX file name extension and not need it with import?

[marcstober]

https://github.com/airbnb/javascript/tree/master/react#naming says to use the JSX file name extension.

Then, a few paragraphs later, there is this code:

// good
import Footer from './Footer';

I can't get that to work. I'm finding that if I name my files with the JSX extension, I have to put the full path with extension in the import statement, and I don't want to do that:

// I don't like this
import Footer from './Footer/Footer.jsx'

// I don't like this either
import Footer from './Footer/index.jsx'

I'm pretty new to React, am I missing some babel plugin or just misunderstanding? Thanks.

[lencioni]

You would need to set up your build tooling to resolve the extension for you. For example, if you are using webpack you want to include .jsx in the resolve.extensions option. More info: https://github.com/webpack/docs/wiki/Configuration#resolveextensions

[perrin4869]

What if you are including it within node itself, for example, inside a test? Is there a way for node to resolve ./Footer to ./Footer.jsx?

[ljharb]

@perrin4869 sure, require.extensions can be modified - this is what the babel-node runner can do, or babel-runtime iirc.

[perrin4869]

@ljharb I see, thanks! Seems to be deprecated, but if babel uses it I guess it should be ok