Rebass: "Cannot read property 'rules' of undefined" after upgrading to styled components v4

[gi-alec]

Seems System.js will generate a styled component without a 'componentStyle' attribute in some cases. Having a tough time putting my finger on what could be the solution.

styled-components.browser.esm.js:1736 Uncaught TypeError: Cannot read property 'rules' of undefined
    at createStyledComponent (styled-components.browser.esm.js:1736)
    at templateFunction (styled-components.browser.esm.js:1971)
    at eval (index.js:32)
    at System.create (System.js:117)
    at eval (Box.js:17)
    at Object../node_modules/grid-styled/dist/Box.js (commons.js:2940)
    at __webpack_require__ (commons.js:725)
    at fn (commons.js:102)
    at eval (index.js:7)
    at Object../node_modules/grid-styled/dist/index.js (commons.js:2964)

[jxnblk]

I haven't tested this out yet, but can you try a fresh install with rm -rf node_modules && npm i – also could be helpful to see the output of npm ls if you can throw that in a gist. I'm planning on removing system-components from Rebass v3, but v2 should work and would like to know about issues like this

[gi-alec]

Just gave the node_modules reset a go, no luck.
npm ls output

[jxnblk]

Hmm, I don't see the actual styled-components dependency in that gist... is that the whole output?

[gi-alec]

That's very odd.. it is showing as installed when I do npm outdated. And it's definitely in my package.json. Investigating

Edit: Tried the following:

• rm -rf node_modules && rm package-lock.json && npm i
• npm uninstall -g styled-components && npm uninstall styled-components && npm i --save styled-components@beta
• npm ls -g | grep styled-components -> nothing found
• npm ls | grep styled-components ->

├─┬ [email protected]
npm ERR! peer dep missing: eslint@^4.19.1, required by [email protected]
npm ERR! peer dep missing: styled-components@>= 2, required by [email protected]
npm ERR! peer dep missing: styled-components@>= 2.0.0, required by [email protected]
npm ERR! peer dep missing: styled-components@>=2.0 || >= 3.0, required by [email protected]
npm ERR! peer dep missing: eslint@^4.1.1, required by [email protected]
npm ERR! peer dep missing: styled-components@>=2.0 || >=3.0, required by [email protected]
npm ERR! peer dep missing: react-emotion@>=9.0, required by [email protected]
├─┬ [email protected]
│ ├── UNMET PEER DEPENDENCY styled-components@>=2.0 || >=3.0
├─┬ UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├─┬ [email protected]

Looking in node_modules, the library is present

[gi-alec]

Just in case you don't believe me (because I wouldn't believe me)
npm version: 6.4.1
node version: 10.6.0

{
  "name": "zzz",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "test": "npm run lint:css && npm run lint:js && npm run check-pretty",
    "setup": "node ./bin/setup.js",
    "dev": "gatsby develop",
    "lint:js": "eslint --ext .js,.jsx .",
    "lint:css": "stylelint 'src/**/*.js'",
    "check-pretty": "prettier -l {,src/**/}*.{js,jsx,json,css,scss}",
    "format": "prettier --write \"src/**/*.js\"",
    "commit": "git-cz"
  },
  "dependencies": {
    "babel-plugin-styled-components": "^1.6.2",
    "chalk": "^2.4.1",
    "contentful-import": "^7.3.0",
    "emotion": "^9.2.8",
    "gatsby": "^2.0.0-rc.3",
    "gatsby-image": "^2.0.0-rc.1",
    "gatsby-plugin-canonical-urls": "^2.0.0-rc.1",
    "gatsby-plugin-feed": "^2.0.0-rc.2",
    "gatsby-plugin-google-analytics": "^2.0.0-rc.1",
    "gatsby-plugin-google-fonts": "0.0.4",
    "gatsby-plugin-manifest": "^2.0.2-rc.1",
    "gatsby-plugin-netlify": "^2.0.0-rc.1",
    "gatsby-plugin-nprogress": "^2.0.0-rc.1",
    "gatsby-plugin-offline": "^2.0.0-rc.1",
    "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
    "gatsby-plugin-sharp": "^2.0.0-rc.2",
    "gatsby-plugin-sitemap": "^2.0.0-rc.1",
    "gatsby-plugin-styled-components": "^3.0.0-rc.1",
    "gatsby-remark-images-contentful": "^2.0.0-rc.2",
    "gatsby-source-contentful": "^2.0.1-rc.2",
    "gatsby-source-filesystem": "^2.0.1-rc.1",
    "gatsby-transformer-remark": "^2.1.1-rc.1",
    "gatsby-transformer-sharp": "^2.1.1-rc.2",
    "inquirer": "^6.2.0",
    "normalize.css": "^8.0.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "ramda": "^0.25.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-helmet": "^5.2.0",
    "rebass": "^2.1.0",
    "styled-components": "^4.0.0-beta.0",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "commitizen": "^2.10.1",
    "cz-conventional-changelog": "^2.1.0",
    "eslint": "^5.4.0",
    "eslint-config-gatsby-standard": "^1.2.1",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "ghooks": "^2.0.4",
    "precise-commits": "^1.0.2",
    "prettier": "^1.13.7",
    "stylelint": "^9.5.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    },
    "ghooks": {
      "pre-commit": "precise-commits"
    }
  }
}

[jxnblk]

Weird, I just tried npm ls | grep styled-components in a local directory and don't see it either... Anyway, seems like that's not the issue, let me see if I can get a demo with both libs working locally...

[gi-alec]

That red herring just cost me an hour of my life 😢
Thanks for sticking with me

[gi-alec]

Here's a link to a Code sandbox environment with all the dependencies needed. The sandbox is erroring on something entirely different, so maybe using a different environment might be worthwhile. Figured I'd drop it here regardless to save you doing the same thing.

[chrislopresto]

Using @gi-alec's sandbox as a starting point, I did a little investigation... basically copy/pasted problematic imports in locally until things worked. You can see things working in this sandbox.

I noticed a console warning that multiple instances of styled-components were present. Removing the styled-component babel plugin eliminated that error, and I didn't dig any deeper.

While I didn't actually solve anything, hopefully this is somewhat helpful. Unfortunately, I can't dig further today. @jxnblk, in case this helps you troubleshoot... my problem occurred when I tried to switch from emotion to styled-components 4.

Old code

import { Box, Flex } from 'rebass/emotion';

New code

```ts
// Fighting some TypeScript issues, so this didn't work
import { Box, Flex } from 'rebass';

// So I tried this and got TypeError: Cannot read property 'rules' of undefined
import { Box, Flex } from 'grid-styled';

// Out of curiosity I tried this and it worked
import { Box, Flex } from '@rebass/grid';

[jxnblk]

Thanks, I did a little digging around as well, and suspect it's due to the hack I've used setting styledComponentId = 'lol' to trick styled-components into passing the innerRef attribute through (something I never used personally). Because styled-components v4 thinks that it's a component, it's also trying to get the componentStyle static property, which doesn't exist.

I'll be removing the hack in v3, but should look into updating v2 to use @rebass/components, which shouldn't cause this issue, but might introduce a regression for anyone using the innerRef prop.

Now that styled-components has a first-class as prop and uses the official React.forwardRef, there's almost no need for some of the functionality built into the old system-components and clean-tag utils

[jxnblk]

Oh, I should note that @rebass/components also uses forwardRef so that might make the innerRef issue with styled-components v3 a non-issue

[gi-alec]

Awesome, nice find. I'll test this and confirm as soon as I can.

I appreciate all the hard work you've done for open source, Brent. ❤️ 🎆

[jxnblk]

I’m working on a branch to update v2 to the latest deps so keep an eye out for it

[jxnblk]

Just published v2.3.0 which might work with SC v4 if you wanna test it out

[gi-alec]

2.3.0 resolved the error :)
I did get a warning after updating. Running npm dedupe resolved the duplicate instances warning.