Export react jsx-components in index.js files

Question

How can I bundle react-components, defined in jsx-files, in an index.js file?

In a way that the components can be accessed by import module from "/module"; let C = module.Component;.

With:

/module
  index.js
  Component.jsx

Solution 1

export Component from "./Component"

You should not use export default for your use case. There is only a single default export per module. This value is to be considered as the "main" exported value since it will be the simplest to import. Refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export for more detail

Solution 2

To re-export the component as a default export:

export { default } from './Component';

To re-export the component as a named export:

export { default as NamedComponent } from './Component';

You should prefer exporting as default from index.js since it will likely be the only export from the index.

Your component import will look like this:

import Component from './module';

or this, if you use a named export:

import { NamedComponent } from './module';

Assuming you're using webpack to bundle your files, to make sure your imports can use './Component' instead of './Component.jsx', include .jsx as an extension in your resolve property in webpack.config.js:

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Comments

[thando]

Thank you, but this is not my point here, the problem is that the index.js seems to be incompatible with the jsx files.

[alpha]

is the code working if you replace your import and export statement with my code?

[thando]

Thank you! The index.js as proposed [here][1] is working: export { default as Component } from "./Component.jsx"; [1]: stackoverflow.com/questions/34072598/…