Ошибка модуля Npm React

В настоящее время я пытаюсь создать библиотеку компонентов реакции.

У меня настроен проект это, но когда я пытаюсь включить его в демонстрационный проект, я получаю следующую ошибку:

Invariant Violation

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'App'.

Мой index.js:

import Button from "./components/Button";

export default {
  Button
};

мой образец компонента

import styled from 'styled-components';
const Button = styled.button`
  background: #1FB6FF;
  border: none;
  border-radius: 2px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 40px;
  font-weight: 200;
  margin: 8px 0;
  outline: none;
  padding: 0 12px;
  text-transform: uppercase;
  transition: all 300ms ease;
  &:hover {
    background: #009EEB;
  }
`;
export default Button;
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

может кто подскажет где проблема?

Заранее спасибо!

Разместите свой код.

Colin Ricardo 25.04.2018 11:24

Я связал проект github в описании, потому что думаю, проблема может быть связана не только с основным файлом

garritfra 25.04.2018 11:26

Круто, выложи свой код. Кроме того, в этом проекте GitHub даже нет файла App.js.

Colin Ricardo 25.04.2018 11:26

у него есть index.js

garritfra 25.04.2018 11:29
export default { Button } должен быть: export default Button.
Colin Ricardo 25.04.2018 11:29

Разве это не проблема, когда я добавляю дополнительные компоненты?

garritfra 25.04.2018 11:31

Нет, по умолчанию вы можете экспортировать только одно. Когда у вас много компонентов, они больше не будут использоваться по умолчанию. Также в index.js можно делать что-то вроде: export * from ./Button1.js, export * from ./Button2.js и т. д.

Colin Ricardo 25.04.2018 11:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
7
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Думаю, export default { Button } должен быть: export default Button.

а где ваш рендеринг в HTML?

Colin Ricardo 25.04.2018 12:00

я должен?

garritfra 25.04.2018 13:22

Какие? Вы нигде не визуализируете свои компоненты, например файл App.js с ReactDOM.render().

Colin Ricardo 25.04.2018 15:15

Попробуйте это в своем файле index.js вместо

export * from "./components/Button";

сделай это

export Button from "./components/Button";

а также

export default { Button }

должно быть:

export default Button.

Для получения дополнительной информации обратитесь к этому ES6 export * from import?

Другие вопросы по теме