将 react 组件发布到 npm 并重用它答案

【问题标题】：Publish a react component to npm and reuse it将 react 组件发布到 npm 并重用它
【发布时间】：2017-09-11 07:20:15
【问题描述】：

我正在尝试将一个基本的 React 组件发布到我的 npm 注册表并尝试重用它。我认为我没有遵循正确的方式来分发我的反应组件。这是我所拥有的：

这是目录结构：

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

我使用import MyComponent from '@pankaj/my-component'将模块导入另一个项目。

当我像使用这个组件时

我收到以下错误：

React.createElement: type is invalid -- 需要一个字符串（对于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从文件中定义。

请帮助我了解分发 React 组件的正确方法，以便我的组织内的其他项目可以使用它们。

这是我如何使用这个组件：

ComponentUse.js

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

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

我有一个 index.html 有“根”div。

【问题讨论】：

在导入 console.log(MyComponent) 后尝试检查实际导入的内容。您可能无法实际导入它并尝试在undefined 上调用createElement。
@PedroCastilho component is : [object Object]。有没有办法可以在手表中看到 MyComponent？
你的问题是你的渲染函数没有return语句，所以当你尝试渲染它时得到undefined。
我什至根据其中一个答案添加了这一点。我很糟糕，我忘了把它放在这里。但是即使在返回后错误也没有改变。编辑了问题以反映我现在所拥有的。

标签： reactjs npm webpack react-jsx

【解决方案1】：

每个 react 组件都需要一个 return 语句。在您的渲染函数中添加一个 return 语句，它应该可以工作。

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

你不能直接从你的 react 组件渲染到 Dom，而是返回它以便 react 可以使用它。

在 webpack 中，使用 output.library https://webpack.js.org/concepts/output/#output-library 将输出文件指定为库

【讨论】：

试过了，还是不行:(
能否在使用组件的地方添加代码。
已添加。我什至尝试过import MyComponent from '@pankaj/my-component/dist.bundle' 无济于事
查看我的编辑。您需要解构组件。试试看。
非常感谢。 libraryTarget: 'umd' 是关键。

【解决方案2】：

我写了一个完整的 Medium 故事，因为我和你有同样的问题，但没有关于它的信息。看看吧：https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

主要修复方法是在 webpack.config.js 文件中添加libraryTarget: 'umd'

【讨论】：

嗯，这里和那里都有一些链接，但我同意在你写完之前没有什么可以解释完整的故事。干得好！

【解决方案3】：

如果你用 es6 语法和 babel 导出，你的组件将在 MyComponent.default 命名空间中。为避免这种情况，您应该安装：

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

并将其添加到 babel conf：

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

【讨论】：