Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Elements Module & Absolute Imports

In the previous video, we talked about building a utilities library. In this video, we’ll be talking about building a styled components library.

Downloads

Become a pro to download code and videos

Comments

Michael

over 2 years ago

@Trace this was the only thing that worked for me! Here is a link to the docs: https://styled-components.com/docs/faqs

Christoffer

over 2 years ago

@Trace Thanks Trace, was wondering why I got that error.

smc

about 3 years ago

thanks for these updates; helped a lot.

R

about 3 years ago [edited]

Bummer, the import using the index file does not work at all for the Card component.

Tried the suggestion of cdcasey. Also tried: https://hackernoon.com/absolute-imports-with-create-react-app-4c6cfb66c35d

Getting the error: ./src/Elements/Modal.js Attempted import error: '../Elements' does not contain a default export (imported as 'Card').

Only possible way is using the import directly instead of via the ./src/Elements/index.js. Which defeats the entire purpose of this video and the next.

./src/Modal.js

import { Portal } from 'Utilities';
import { Icon } from 'Elements';
import { Card } from 'Elements/Cards'; 
// ^ this should typically not be necessary as explained in the video

// ...

./src/Elements/index.js:

import Icon from './Icon';
import Modal from './Modal';

export * from './Cards';
export { Icon, Modal };

./Elements/Cards.js

import styled from 'styled-components';

export const Card = styled.div`
  background: white;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
`;

SRB

about 3 years ago

@Trace Thanks

SRB

about 3 years ago

@Trace Thanks

cdcasey

over 3 years ago

I got a deprecation warning about setting NODE_PATH in a .env file, so instead I put the following in a jsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Dion

over 3 years ago

@Trace Thanks :)

Trace

over 3 years ago

Newer syntax deprecated the Card.extend syntax.

Proper way is now const ModalCard = styled(Card)``;

Not hard to find, just figured I'd leave it here for anyone in the future.

Want to join the conversation?

Become a Pro member today!