🏠 back to Observable

Need help using required module "styled-components"

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

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

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.

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

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

That notebook is giving my firefox:

styled = dt: unable to load module

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

Hi Jacob,

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

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.