Publish a reactive component on npm and reuse it

Question

I am trying to publish a core React component in my npm registry and am trying to reuse it. I think that I will not properly distribute my component of the reaction. Here is what I have:

This is the directory structure:

MyReactPOC -> main.jsx -> .npmrc -> package.json -> webpack.config.js 

main.jsx

 import React from 'react'; class MyComponent extends React.Component { render() { return ( <div> <p>Hello from MyComponent!!</p> </div> ); } } export default MyComponent 

package.json

 { "name": "@pankaj/my-component", "version": "1.0.7", "description": "POC for importing a component", "main": "./dist/bundle.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "prepublish": "webpack --config webpack.config.js" }, "repository": { "type": "git", "url": "my git repo" }, "author": "Pankaj", "license": "ISC", "dependencies": { "react": "~15.5.4", "react-dom": "~15.5.4" }, "devDependencies": { "babel-cli": "~6.24.1", "babel-core": "~6.24.1", "babel-loader": "~6.4.1", "babel-preset-es2015": "~6.24.1", "babel-preset-react": "~6.24.1", "webpack": "~2.4.1" } } 

webpack.config.js

 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './main.jsx', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] }, }; 

I am importing a module into another project using import MyComponent from '@pankaj/my-component' .

When I use this component, for example

I get the following error:

React.createElement: type is invalid - a string is expected (for built-in components) or a class / function (for composite components) but received: object. You probably forgot to export your component from the file that it defined.

Please help me understand the correct way to distribute reactive components so that they can be used by other projects in my organization.

This is how I use this component:

ComponentUse.js

 import React from 'react'; import ReactDOM from 'react-dom'; import MyComponent from '@pankaj/my-component'; ReactDOM.render( <MyComponent/>, document.getElementById('root') ); 

I have an index.html that has a 'root' div.

Answer 1

Each response component needs a return statement. Add a return statement to your render function and it should work.

 ... render() { return (<div>...</div>) } 

You cannot directly visualize Dom from your responsive component, and not return it in order to respond to it.

In webpack, specify your output file as a library using output.library https://webpack.js.org/concepts/output/#output-library

Answer 2

I wrote a complete middle story because I had the same problem as you, and there is no information about it. Check this out: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

The main fix is ​​to add libraryTarget: 'umd' to webpack.config.js

Answer 3

If you export es6 syntax with babel, your component will be in the MyComponent.default namespace. To avoid this, you must set:

 npm i --save-dev babel-plugin-add-module-exports in your .babelrc? 

and add it to the buffer conf:

 { "presets": [ "es2015", "react"], "plugins": ["add-module-exports"] }