Error while creating a npm module of a react component

Question

I am trying to create a node module for all the reusable react components that i have. I am stuck while importing a jsx file. I have a basic jsx module i.e greeting.jsx in components folder.

//greeting.jsx
import React from 'react';
export default class Greeting extends React.Component {
    render() {
        return (
            <p>Hello World</p>
        )
    }
}

Folder structure :-

- index.js
- components
  ¦-- Greeting
      ¦-- greeting.jsx
  ¦-- <Other Modules like Greeting>

index.js which imports all the components and exports them

//index.js

import Greeting from './components/Greeting/greeting.jsx';

export default {
    Greeting
};

When i have to use greeting module i have to import the module. Like the way in below code. But doing this gives me error on the page

import React from 'react';
import ReactDOM from 'react-dom';
import GreetingModule from './index.js';

ReactDOM.render( <GreetingModule />, document.getElementById('content') );

Errors:-

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is where i am stuck now. Although if i import jsx file directly (like below) then it works.

import React from 'react';
import ReactDOM from 'react-dom';
import GreetingModule from './components/Greeting/greeting.jsx';

ReactDOM.render( <GreetingModule />, document.getElementById('content') );

But this is not the way i want to do as i am trying to create a npm module and my index.js should export all the react components.

I have tried googling for creating a npm module for react componets but couldn't find any thing. Please Help, in resolving the issue

Amey · Accepted Answer · 2016-03-13 23:14:51Z

2

The problem is that you are running a babel transform on module in isolation.

I bet that your index.js after transform looks something like:

var Greeting = require('./components/Greeting/greeting.jsx');

exports.default = {
  Greeting
};

And here lies the problem. Your module is exporting all its meat under the default property. So a person using your module needs to use it as follows:

var Greeting = require('greeting').default;

You may either live with this, or use the old way of exporting modules in your index.js. So, you'd change only your index.js to this:

//index.js

import Greeting from './components/Greeting/greeting.jsx';

module.exports = {
  Greeting
};

That should do the trick.

answered Mar 13, 2016 at 23:14

Amey

2,2142 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amey Over a year ago

I don't see your code in the comment. Try updating your original question

user913436 Over a year ago

I got it working finally. I had to do this require('greeting').default.Greeting & there were few browserify configurations that i had to do. This link helped me for that - stackoverflow.com/questions/30386317/…

Collectives™ on Stack Overflow

Error while creating a npm module of a react component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related