Need help using required module "styled-components"

Community Help
1

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

2

Maybe try styled('button')` color: red `?

3

It is though. If you open the URL directly 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.

4

OK, got it. React didn’t resolve properly and needs to be aliased. Here’s the full require code:

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')
2 Likes
5

Thanks @mootari. That seems to have resolved it. Take a look at this Sandbox where I tried your suggestion.

6

That notebook is giving my firefox:

styled = dt: unable to load module

7

Can’t reproduce, perhaps a DNS/caching issue. Does the network tab tell you anything of relevance?

8

Hi Jacob,

FWIW, It’s working OK for me using either Chrome or Edge.

9

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.