Styled-system: React Native Babel dependencies

Created on 11 Jun 2018  路  4Comments  路  Source: styled-system/styled-system

I've been using styled-system for work recently, and I'm definitely a fan of how easy it makes things! Unfortunately, when trying to use it for React Native, I ran into multiple issues. I was able to find a solution by installing four packages:

  • babel-preset-env
  • babel-preset-stage-0
  • babel-preset-react
  • babel-preset-react-native

I'm not sure why this is, but if this could be automated on installing styled-system, that would help out a ton!

Most helpful comment

@wmarkowitz @jxnblk I believe that this has to do to the fact that styled-system is including the .babelrc into the npm distribution.

The fix is pretty simple actually. The .babelrc has to be added to the .npmignore file on the styled-system library.
There was some recent changes on babel on how they resolve the .babelrc file - I will see if I can find the Github thread about this, but for now I will send a PR with this fix.

All 4 comments

This sounds like an issue with your build setup, not this library, right? Sorry if I misunderstand the issue

Sorry I could've been a bit more specific. Pretty much, here's exactly what I did:

  1. I created a new app using create-react-native-app
  2. I install styled-components and styled-system into the project
  3. I try importing something from the styled-system module and I receive an error listed here: https://github.com/jxnblk/styled-system/issues/21
  4. I install babel-preset-env to resolve this issue, but it now gives me a similar one (instead of "env" it says "stage-0")
  5. I install babel-preset-stage-0 to resolve this error but then receive one much more cryptic shown here:
    screen shot 2018-06-08 at 9 54 14 am
  6. I install both babel-preset-react and babel-preset-react-native, thus resolving this error and then allows styled-system to work properly.

I suppose I'm concerned that even from the basic create-react-native-app, there are so many additional things required to get styled-system functional. While it definitely is fine to do all of this at the beginning of any project, I feel as though it would be more convenient to have this done on installing styled-system.

@wmarkowitz @jxnblk I believe that this has to do to the fact that styled-system is including the .babelrc into the npm distribution.

The fix is pretty simple actually. The .babelrc has to be added to the .npmignore file on the styled-system library.
There was some recent changes on babel on how they resolve the .babelrc file - I will see if I can find the Github thread about this, but for now I will send a PR with this fix.

I think #126 should have fixed this, but if anyone can confirm, that'd be super helpful

Was this page helpful?
0 / 5 - 0 ratings