# Need help using required module "styled-components" **URL:** \ **Category:** Help\ **Created:** [July 28, 2019, 4:24am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213 "2019-07-28T04:24:56Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![david-hall](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/david-hall/32/848_2.png) [@david-hall](https://talk.observablehq.com/u/david-hall)\ **Post date:** [July 28, 2019, 4:24am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/1 "2019-07-28T04:24:56Z")
I started plating with tagged template literals on Observable last night and ran into a problem requiring a 3rd party module called “styled-components”. I used [https://observablehq.com/@tmcw/module-require-debugger](https://observablehq.com/@tmcw/module-require-debugger) to find the reference on NPM and added it to a cell, but I still can’t get it to work. I’m not sure where to go from here. My notebook at [https://observablehq.com/@david-hall/tagged-template-literals#help](https://observablehq.com/@david-hall/tagged-template-literals#help) has all of the details about what I’ve tried and a description of the problems I’m seeing. My own tagged template literal code on the page is working fine, but I am having trouble using the 3rd party “styled-components” module. The command… ``` styled = require('https://bundle.run/styled-components@4.3.2') ``` … seems to have loaded OK, but… ``` Button = styled.button` color: red;` ``` … is failing with this error message: ``` Button = TypeError: styled.button is not a function ``` I don’t think the problem is with the require command, but I’m not sure. Any suggestions? Thanks ---
**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\ **Post date:** [July 28, 2019, 9:24am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/2 "2019-07-28T09:24:49Z")
Maybe try `styled('button')` color: red ``? ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [July 28, 2019, 9:32am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/3 "2019-07-28T09:32:10Z")
> [@david-hall](#): > > I don’t think the problem is with the require command, but I’m not sure It is though. If you [open the URL directly](https://bundle.run/styled-components@4.3.2) you can see that it’s basically an empty module. Can’t offer a solution yet, unfortunately. Maybe our module wizard @tom can figure it out. ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [July 28, 2019, 10:00am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/4 "2019-07-28T10:00:04Z")
OK, got it. React didn’t resolve properly and needs to be aliased. Here’s the full require code: ```javascript styled = require.alias({ react: 'https://unpkg.com/react@16.8.6/umd/react.production.min' })('https://unpkg.com/styled-components@4.3.2/dist/styled-components.min') ``` ---
**Author:** ![david-hall](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/david-hall/32/848_2.png) [@david-hall](https://talk.observablehq.com/u/david-hall)\ **Post date:** [July 28, 2019, 8:51pm UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/5 "2019-07-28T20:51:55Z")
> [@mootari](#): > > styled = require.alias({ react: ‘[https://unpkg.com/react@16.8.6/umd/react.production.min](https://unpkg.com/react@16.8.6/umd/react.production.min)’ })(‘[https://unpkg.com/styled-components@4.3.2/dist/styled-components.min](https://unpkg.com/styled-components@4.3.2/dist/styled-components.min)’) Thanks @mootari. That seems to have resolved it. Take a look at this [Sandbox](https://observablehq.com/@david-hall/styled-components-sandbox) where I tried your suggestion. ---
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [July 29, 2019, 5:27pm UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/6 "2019-07-29T17:27:27Z")
That notebook is giving my firefox: styled = dt: unable to load module ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [July 29, 2019, 6:47pm UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/7 "2019-07-29T18:47:21Z")
> [@jrus](#): > > That notebook is giving my firefox Can’t reproduce, perhaps a DNS/caching issue. Does the network tab tell you anything of relevance? ---
**Author:** ![david-hall](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/david-hall/32/848_2.png) [@david-hall](https://talk.observablehq.com/u/david-hall)\ **Post date:** [July 29, 2019, 7:30pm UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/8 "2019-07-29T19:30:45Z")
Hi Jacob, FWIW, It’s working OK for me using either Chrome or Edge. ---
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [July 30, 2019, 1:10am UTC](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213/9 "2019-07-30T01:10:32Z")
Huh. Now seems to work. Maybe it was indeed a cache problem or …? I didn’t have time to try to figure out what precisely the issue was before.