Error: withConfig is not a function

[protoEvangelion]

Cannot get the library to work. I tried minimizing the component to what you see below and get the same error.

import styled from 'styled-shortcut-components'

const Container = styled.div`
  position: relative;
`
export default Container

Loading vanilla styled-components works. I have also tried wrapping styled-components with styled-shortcuts and that doesn't work either :(

Here is the full error:

Container.js:3 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_styled_shortcut_components
___default.a.div.withConfig is not a function
    at Object../src/components/elements/Container/Container.js (Container.js:3)
    at __webpack_require__ (bootstrap dc880dbd2f3b91d4427f:678)
    at fn (bootstrap dc880dbd2f3b91d4427f:88)
    at Object../src/components/elements/Container/index.js (index.js:1)
    at __webpack_require__ (bootstrap dc880dbd2f3b91d4427f:678)
    at fn (bootstrap dc880dbd2f3b91d4427f:88)
    at webpackContext (index\.js$:15)
    at index.js:5
    at Array.forEach (<anonymous>)
    at Object../src/components/elements/index.js (index.js:3)
./src/components/elements/Container/Container.js @ Container.js:3
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
./src/components/elements/Container/index.js @ index.js:1
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
webpackContext @ index\.js$:15
(anonymous) @ index.js:5
./src/components/elements/index.js @ index.js:3
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
./src/components/yields/Home/Home.js @ index\.js$:20
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
./src/components/yields/Home/index.js @ index.js:1
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
webpackContext @ index\.js$:7
(anonymous) @ index.js:5
./src/components/yields/index.js @ index.js:3
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
./src/components/App.js @ userFetchSucceeded.js:4
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
./src/index.js @ index.js:1
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
fn @ bootstrap dc880dbd2f3b91d4427f:88
0 @ index.js:48
__webpack_require__ @ bootstrap dc880dbd2f3b91d4427f:678
./node_modules/@firebase/app/dist/esm/index.js.Object.defineProperty.value @ bootstrap dc880dbd2f3b91d4427f:724
(anonymous) @ app.js:728

[wesm87]

In addition to the missing withConfig() method, the attrs() method isn't chainable; the original styled function lets you do styled.div.attrs({ ... }).attrs({ ... }). It doesn't really make sense for each package that wants to extend styled-components to have to figure out their own way of proxying the template function while keeping all of the original functionality intact so I created a package that does just that:

https://www.npmjs.com/package/styled-transform-proxy

I also published a fork of this package that uses styled-transform-proxy, which fixes the withConfig issue and makes attrs() and withConfig() chainable:

https://www.npmjs.com/package/@wesm87/styled-shortcuts

[donavon]

@wesm87 I'd love to see a PR back into this repo. I haven't looked over the implimention too thoroughly, but on the surface, I love the idea.

[wesm87]

@donavon sure thing, I created a branch on my fork that implements this and updates the tests to check for withConfig() and make sure both attrs() and withConfig() are chainable. For some reason Jest just hangs when I try to run the tests so I can't see if they're passing or not; it does the same thing with your repo, though, so I think it's something with my local setup. I'll try the tests on my laptop or maybe a clean user account and once I confirm everything is working I'll open a PR.