В настоящее время я пытаюсь создать библиотеку компонентов реакции.
У меня настроен проект это, но когда я пытаюсь включить его в демонстрационный проект, я получаю следующую ошибку:
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>
может кто подскажет где проблема?
Заранее спасибо!
Я связал проект github в описании, потому что думаю, проблема может быть связана не только с основным файлом
Круто, выложи свой код. Кроме того, в этом проекте GitHub даже нет файла App.js.
у него есть index.js
export default { Button } должен быть: export default Button.
Разве это не проблема, когда я добавляю дополнительные компоненты?
Нет, по умолчанию вы можете экспортировать только одно. Когда у вас много компонентов, они больше не будут использоваться по умолчанию. Также в index.js можно делать что-то вроде: export * from ./Button1.js, export * from ./Button2.js и т. д.





Думаю, export default { Button } должен быть: export default Button.
а где ваш рендеринг в HTML?
я должен?
Какие? Вы нигде не визуализируете свои компоненты, например файл App.js с ReactDOM.render().
Попробуйте это в своем файле index.js вместо
export * from "./components/Button";
сделай это
export Button from "./components/Button";
а также
export default { Button }
должно быть:
export default Button.
Для получения дополнительной информации обратитесь к этому ES6 export * from import?
Разместите свой код.