Реагировать |Пакет Npm - Как я могу экспортировать 2 компонента для использования в качестве пакета Npm

Question

Так что это может быть глупый вопрос, но он продолжает беспокоить меня некоторое время.

Используя React, я создал два компонента (Buttons.js & Message.js), каждый из которых имеет экспорт. Однако теперь я хочу использовать оба этих компонента в виде пакета npm. Я протестировал свои компоненты на примере без проблем, затем я опубликовал свой пакет npm без всяких проблем. Но теперь, когда я пытаюсь использовать импорт и визуализацию своих компонентов, я наткнулся на ошибку.

В: Как я могу экспортировать 2 компонента для использования в качестве пакета npm

Это мой подход:

Моя посылка

Buttons.js

import React from "react";
import "./Buttons.css";

export const Button = ({ text }) => <div className="button">{text}</div>

Message.js

import React from 'react';
import "./Message.css";

export const Message = ({ type, message }) => <div className={["messageBox", type].join(" ")}>{message}</div>

index.js

export { default as Buttons } from "./Buttons";
export { default as Message } from "./Message";

Package.json

{
   "name": "ui-elements",
   "version": "1.0.0",
   "description": "Just a test",
   "main": "dist/index.js"
...
}

Мой проект

import Message from "ui-elements";
import Button from "ui-elements";

export default class App extends Component  {
    render () {
        return (
            <React.Fragment>
                <Button text="Log in"  />
                <Message type="error" message="Error, awesome..." />
            </React.Fragment>
        )
    }
}

Сообщение об ошибке

Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами.

Answer 1

Попробуйте это в вашем index.js:

import Buttons from "./Buttons";
import Message from "./Message";

export {
  Buttons,
  Message
}

Но я думаю, что модули ES6 все еще экспериментальны в node.js, так что, возможно, вам придется переписать его в старую module.exports версию:

const Buttons = require("./Buttons"); // and rewrite in Buttons.js
const Message = require("./Message"); // and rewrite in Message.js
module.exports = { 
  Buttons, 
  Message 
};