Theme is not defined for attrs(props => ({}))

Hi guys,

I’m facing an issue which is actual covered by your unit tests (attrs.test.js) but does not work in my project or in codesandbox. I’m really confused and would be thankful for a hint what could be wrong.

Environment

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: x64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz
 - Memory: 209.28 MB / 8.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 11.0.0 - /usr/local/bin/node
 - Yarn: 1.12.1 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - babel-plugin-styled-components: >= 1 => 1.8.0 

Reproduction

https://codesandbox.io/s/oj4x41x0yz

Steps to reproduce

The actual setup is just a ThemeProvider and a styled components beneath it which accesses the theme via styled.img.attrs(props => ({})).

Expected Behavior

It should be possible to access props.theme with this code since it’s proposed as good practice in the docs: https://www.styled-components.com/docs/faqs#when-to-use-attrs

Actual Behavior

As can be seen in the CodeSandbox snippet the following error occurs (which means theme in undefined):

Cannot read property 'icons' of undefined
/MyIcon.js:4:19
  1 | import styled from "styled-components";
  2 | 
  3 | export default styled.img.attrs(props => ({
> 4 |   src: props.theme.icons.github
    |                   ^
  5 | }))`

My current workaround is adding a withTheme around the styled component 😕

Greetings, Thomas

[probablyup]

Fixed in https://github.com/styled-components/styled-components/releases/tag/v4.1.2

[probablyup]

There’s a fix in master, it just hasn’t been released yet I think. On Tue, Nov 27, 2018 at 10:17 AM Sébastien Fichot [e-mail] wrote:

Same here.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2245#issuecomment-442095638, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1m0ruA6tVqNnMIBIIdupj-NsIFw1ks5uzVeEgaJpZM4YzRLd .