Multiple React components in a single module

Question

I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components I physically host in the same file and reuse across projects, I would like to export more than one component. I have tried an array:

module.exports = [Component1, Component2]

and have also tried an object with multiple properties:

module.exports = {Comp1: Componenet1, Comp2: Component2} and have also tried in-lining the calls to createClass in the object, but that didn't help.

Is there a way to do this or do I have to split every component in to a seperate JSX file?

Sacci

Answer 1

I have put multiple components in one file and export the object like you suggested.

module.exports = {
    comp1: Component1,
    comp2: Component2
}

Then where they are used do

var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;

Pammie

This is a bad idea in case you only want comp1. In this case you're requiring the entire model when calling that first require and you're sending code to the browser that it doesn't need. – Cheyenne

This will not work with webpack2, since they changed module.exports to read-only, if any 'import' statement is used (es6 style) – Hazing

Answer 2

You can do like this, with an index.js file into your /components/ folder

/components/index.js

import Users from './Users/Users';
import User from './Users/User';


module.exports = {
  User,
  Users
}

IMPORT

import { Users, User } from './components';

As you can see, I named my file index.js, it prevent me from write it in the import declaration. If you want to name your file with another name than index.js, you'd have to write the name of the file in the import, Node won't guess it ! ^^

Welladvised

This gave me an error, but using the following worked: export { User, users} – Worrisome

Answer 3

Define functions

function sum(a, b) {
  return a + b
}
function sub(a, b) {
  return a - b
}
function mul(a, b) {
  return a * b
}

Define export export { sum, sub, mul }

Import functions you need import { sum, sub } from 'myfile' or all the functions import * as myfunctions from 'myfile'

and call as sum(1+1) or myfunctions.sum(1+1)

src: https://flaviocopes.com/how-to-export-multiple-functions-javascript/

Gordongordy

Answer 4

I'm new to react and I faced this situation too. And this is how I overcame it.

Along to this question it also answers the following error:

export 'default' (imported as 'db') was not found in './index.js' (possible exports: auth, db).

1st method - use export default & don’t destructure while importing

index.js

const db = // module 1;
const auth = // module 2;

export default { db, auth}; // notice the default keyword here

while importing in other file

import db from "./index.js"

2nd method - use export & destructure while importing

index.js

const db = // module 1;
const auth = // module 2;

export { db, auth};

and while importing

import { db } from "./index.js"

Please note when to use destructuring while using the import statement

Guyon

Answer 5

I use function to return component.

 module.exports = {
   comp1: function(){
     return Component1;
   }
 }

Then

var myCompontents = require('./components');
var comp1 = myComponents.comp1();

Tortfeasor

I don't follow how adding another layer of indirection in the form of a function wrapper achieves anything. module.exports = {Component1} is much simpler for both importer and exporter. – Phiz

Answer 6

The following worked for me.

In a single file, MultipleComponents.js, add two or more components like below.

const ComponentA = () => <div>Component A works! </div>

const ComponentB = () => <div>Component B works! </div>


export {ComponentA, ComponentB} // Export this way without using default

Now import these components in any other component you wish like below

import {ComponentA} from 'your/directory/MutlipleFiles;

Kantian

Answer 7

You can simply export multiple components as an array:

module.exports = [Component1, Component2]

Then to use the components:

var MyComponents = require('your/path/to/components');
var Component1 = MyComponents[0];
var Component2 = MyComponents[1];

Melonie

this is a bad practice. why would you output an array and not an object? this is better in every possible way: var Component1 = MyComponents.Component1; var Component2 = MyComponents.Component2; – Hulking

@VitalikZaidman For the reason that Op states "and have also tried an object with multiple properties", yes an object would be better practice and if you wanted to be optimal I would suggest using ES6 import and destructuring. – Melonie