Using Link from Theme-UI and Gatsby throws an error

[spaut]

I'm getting a webpack error when trying to use Gatsby's Link component and style it with theme-ui.

import React from "react"
import { Link } from "gatsby"
import { jsx, Link } from 'theme-ui'

Throws this error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

/var/www/app/src/pages/404.js: Identifier 'Link' has already been declared (4:14)

  2 | import React from "react"
  3 | import { Link } from "gatsby"
> 4 | import { jsx, Link } from 'theme-ui'

Expected behavior Seems like you should be able to style links with theme-ui.

[lachlanjc]

Yep, so this error isn’t library-related, that’s just a JavaScript issue, since you can’t have multiple variables with the same name. I usually do this:

import { Link } from 'gatsby'
import { jsx, Link as A } from 'theme-ui'

Using as in your import allows you to change what your variable will be called.

I think this issue can be closed :+1:

[spaut]

Hey lachlanjc,

thanks for weighing in. I'm a bit out of my depth here, so I'm hoping you can elaborate.

I tried changing the import from theme-ui. When I add "Link as A", the element doesn't pick up the theme-ui style.

Then, I changed the element to , and the styling worked, but the Link functionality didn't.

So I still think I'm missing something.

I was able to get the link and the styling to work, by using , but I'm not sure that's what you had in mind. In that case I'm not using the Link functionality at all.

Appreciate any help you might have here.

[lachlanjc]

@spaut Happy to help, though it looks like your last comment has some missing words, specifically the code. Can you show the code you’ve got?

[spaut]

Yep. Here's the import code:

import { Link } from "gatsby"
import { jsx, Link as A } from 'theme-ui'

Here are the element options:

<Link to="/">here</Link>

In the above case, the link works but it isn't picking up the theme-ui style

<A to="/">here</A>

In that case, the style is picked up, but now it no longer functions as a link: Gatsby isn't converting the element to an anchor tag with an href.

<A href="/">here</A>

In the above case, I get the style and the link works, but of course now it's just a normal anchor tag with an href, not a Gatsby .

[lachlanjc]

Got it. I use Next.js primarily, where you wrap Next’s Link around Theme UI’s Link, but I just opened a CodeSandbox & it looks like if you’re using the Theme UI JSX pragma you imported, it just works, and you don’t need the component from Theme UI at all:

More info in the docs, here: https://theme-ui.com/recipes/gatsby-link

[spaut]

@lachlanjc Right, I can style the way you did (using sx={{}}) no problem.

I was trying to have the <Link /> styled by the theme file themes.styles.a rather than declarations in sx. That should happen "by default" according to https://theme-ui.com/components/link/.

I think I realized my mistake. Since it should happen by default, I didn't need to import Link from theme-ui. But that still wasn't working -- I'm not using MDX. So I wrapped the layout in <BaseStyles></BaseStyles> and now <Link /> is getting the style defined in theme and it works as a Link.

Essentially I want all the <a> tags and <Link> elements to pick up their default styling from the theme. Then I'll override them with sx in specific cases.

If there's a better approach than using BaseStyles, let me know.

Also, sorry if this is the wrong spot for this kind of thing. I couldn't find a Spectrum specifically for Theme UI.

[lachlanjc]

Ah, got it. BaseStyles will work, or else you can do this:

<A as={Link} to=“/about”>Automatically styled!</A>

https://codesandbox.io/s/serverless-sun-j4vyc?file=/src/pages/index.js:301-351

[spaut]

Awesome. That actually works better for this case.

Thanks, @lachlanjc !