Opublikuj komponent reagowania na npm i użyj go ponownie

Question

Próbuję opublikować podstawowy składnik React do mojego rejestru npm i próbuję go ponownie użyć. Myślę, że nie podążam za właściwym sposobem dystrybucji mojego komponentu reagowania. Oto co mam:

Jest to struktura katalogów:

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'] 
       } 
      } 
     ] 
    }, 
}; 

importować modułu w innym projekcie, używając import MyComponent from '@pankaj/my-component'.

Kiedy używać tego składnika jak

pojawia się następujący błąd:

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

Proszę mi pomóc zrozumieć właściwą drogę, aby rozprowadzić reagować komponenty tak, że mogą być wykorzystywane przez inne projekty w moim org.

Oto jak używać tego składnika:

ComponentUse.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MyComponent from '@pankaj/my-component'; 

ReactDOM.render(
    <MyComponent/>, 
    document.getElementById('root') 
); 

Mam index.html, który ma 'root' div.

Answer 1

Każdy składnik reagujący wymaga instrukcji return. Dodaj instrukcję return do swojej funkcji renderowania i powinna działać.

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

Nie można bezpośrednio renderować do Dom z komponentu reagowania, zamiast tego zwracać go, aby można było z nim reagować.

W WebPack, należy określić plik wyjściowy w postaci biblioteki używając output.library https://webpack.js.org/concepts/output/#output-library

Answer 2

przypadku eksportowania z ES6 składni z babel, komponent będzie w przestrzeni nazw MyComponent.default. Aby tego uniknąć należy zainstalować:

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

i dodać go do konf Babel

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

Answer 3

pisałem pełną Średni historię, bo miałem ten sam problem jak ty i nie ma informacji o tym . Sprawdź: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Głównym rozwiązaniem jest dodanie libraryTarget: 'umd' w webpack.config.js złożyć