Storybook: native storybook unable to resolve babel aliases

[ximenean]

I had a working storybook that broke when upgrading to RN 0.50. It can no longer resolve the babel aliases. The package was created with react-native init

RN: 0.50.3
Storybook: 3.2.16

My babelrc:

{
  "presets": ["flow", "react-native"],
  "plugins": [
    ["babel-plugin-module-resolver", {
      "root": ["."],
      "alias": {
        "crypto": "./src/polyfills/modules/crypto/index.js",
        "xenon": "./src"
      }
    }]
  ],
  "env": {
    "test": {
    },
  },
}

[ximenean]

Looks to be due to a breaking change in RN 0.50.
See https://github.com/facebook/react-native/commit/023ac57337b351959d443133c3c09607c4ffc800

Can be resolved by creating a rn-cli.config.js file with the following contents:

module.exports = {
  getEnableBabelRCLookup() {
    return true;
  },
};

(taken from https://github.com/facebook/react-native/releases/tag/v0.50.0)

I've not looked in to how storybook resolves references, is this approach just a workaround or the best way forward?

[ritz078]

Switch to haul just for storybook. That works.

[ximenean]

@ritz078 not for me. Haul runs in to issues with some of my dependencies. Specifically victory-native.

I guess I just need to configure webpack.haul.js correctly but this doesn't feel like the happy path.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[akiwarheit]

I'm getting the same error

{
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "production": {
      "plugins": [
        "transform-react-constant-elements",
        "transform-remove-console"
      ]
    }
  },
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "root": ["./"],
        "alias": {
          "@assets": "./assets",
          "@domain": "./artifacts/domain",
          "@util": "./artifacts/util",
          "@lib": "./artifacts/lib",
          "@components": "./artifacts/components"
        }
      }
    ]
  ]
}

Already have the ff. file above - it still complains Module @components does not exist in the Haste module map

Already have the rn-cli.config.js file above, app works fine - just storybook.

[alanbueno]

any news regarding this one?
same thing here, app works fine but when running storybook babel's not able to resolve any alias while pointing the --projectRoot storybook instead of replacing the app entry point