创建反应组件的 npm 模块时出错

Question

我正在尝试为我拥有的所有可重用反应组件创建一个节点模块。我在导入 jsx 文件时卡住了。 我有一个基本的 jsx 模块，即在 components 文件夹中的 greeting.jsx。

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

文件夹结构：-

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

index.js 导入所有组件并导出它们

//index.js

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

export default {
    Greeting
};

当我必须使用问候模块时，我必须导入该模块。就像下面代码中的方式一样。但是这样做会给我页面上的错误

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

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

错误：-

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.

这就是我现在卡住的地方。虽然如果我直接导​​入 jsx 文件（如下所示），那么它可以工作。

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

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

但这不是我想要的方式，因为我正在尝试创建一个 npm 模块，我的 index.js 应该导出所有的反应组件。

我尝试用谷歌搜索为反应组件创建一个 npm 模块，但找不到任何东西。请帮忙解决问题

Answer 1

问题是您正在隔离模块上运行 babel 转换。

我敢打赌，你的index.js 转换后看起来像：

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

exports.default = {
  Greeting
};

这就是问题所在。您的模块正在导出 default 属性下的所有内容。所以使用你的模块的人需要按如下方式使用它：

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

您可以接受这个，也可以使用旧的方式在 index.js 中导出模块。因此，您只需将您的 index.js 更改为：

//index.js

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

module.exports = {
  Greeting
};

这应该可以解决问题。