我正在尝试将基本的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无效 - 期望一个字符串(for 内置组件)或类/函数(用于复合组件) 但得到了:对象。您可能忘记从中导出组件 将其定义为。
请帮助我了解分发反应组件的正确方法,以便我们组织内的其他项目可以使用它们。
以下是我使用此组件的方法:
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,其中包含&#39; root&#39;格。
答案 0 :(得分:3)
每个反应组件都需要一个return语句。在渲染函数中添加一个return语句,它应该可以工作。
...
render() {
return (<div>...</div>)
}
你不能直接从你的反应组件渲染到Dom,而是返回它以便反应可以使用它。
在webpack中,使用output.library https://webpack.js.org/concepts/output/#output-library
将输出文件指定为库答案 1 :(得分:1)
我写了一个完整的中级故事,因为我和你有同样的问题,而且没有关于它的信息。 看看:https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce
主要修复是在webpack.config.js文件中添加libraryTarget: 'umd'
答案 2 :(得分:0)
如果使用带有babel的es6语法导出,则组件将位于MyComponent.default命名空间中。为避免这种情况,您应该安装:
npm i --save-dev babel-plugin-add-module-exports in your .babelrc?
并将其添加到babel conf:
{
"presets": [ "es2015", "react"],
"plugins": ["add-module-exports"]
}