npm react module error

Question

I am currently trying to build a react component library.

I have this project set up, but when i try to include it in a demo project, i get the following error:

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'.

My index.js:

import Button from "./components/Button";

export default {
  Button
};

my sample component

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>

can anyone tell where the problem is?

Thanks in advance!

I linked the github project in the description because i think the issue might be related to not just the main file — garritfra, Apr 25 '18 at 09:26
Cool, post your code. Also that GitHub project doesn't even have an App.js file. — Colin Ricardo, Apr 25 '18 at 09:26
`export default { Button }` should be: `export default Button`. — Colin Ricardo, Apr 25 '18 at 09:29
No, you can only default export one thing. When you've many components it won't be default anymore. Also, in `index.js` you can do something like: `export * from ./Button1.js`, `export * from ./Button2.js`, etc. — Colin Ricardo, Apr 25 '18 at 09:33

score 0 · Accepted Answer · answered Apr 25 '18 at 09:30

0

I think export default { Button } should be: export default Button.

answered Apr 25 '18 at 09:30

Colin Ricardo

16,488
11
47
80

and where are your rendering to HTML? – Colin Ricardo Apr 25 '18 at 10:00
am i supposed to? – garritfra Apr 25 '18 at 11:22
What? You're not rendering your components anywhere, e.g. an App.js file with `ReactDOM.render()`. – Colin Ricardo Apr 25 '18 at 13:15

score 0 · Answer 2 · answered Apr 25 '18 at 10:26

0

Try this, In your index.js file instead of

export * from "./components/Button";

do this

export Button from "./components/Button";

and

export default { Button }

should be:

export default Button.

For more info refer this ES6 export * from import?

answered Apr 25 '18 at 10:26

Gautam Naik

8,990
3
27
42

npm react module error

2 Answers2