Storybook: Can't resolve module paths in parent directories

[xareelee]

I use lerna for mono-repo, and here is my folder structures:

monorepo
  |-- lerna.json
  |-- packages/
  |     |-- foo/                # module `@foo`
  |-- apps/
        |-- react-native-app/   # react-native project
              |-- package.json

In my react-native-app project, I use local module @foo by lerna, and lerna will make a symlink in the apps/react-native-app/node_modules.

After running react-native start, it failed to bundle the js code:

error: bundling failed: "Unable to resolve module `@foo` from `{path_to_file}`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

To resolve this, I need to add --root when bundling to search the paths for symlink in the node_modules by lerna:

$ react-native start --root ../../packages

Now, I can't find a way to pass search paths to storybook node server.

$ storybook -p 7007 --root ../../packages

  error: unknown option `--root'

How can I use local lerna modules with storybook?

[ndelangen]

Have you tried using haul?
https://github.com/storybooks/storybook/search?utf8=%E2%9C%93&q=haul&type=

[rmevans9]

While haul should do the trick I can also understand the want for using the regular react-native packager. If you would want to use that packager I think you have two options:

1. Run the packager yourself. When you kick off storybook simply pass this arg: --skip-packager then in another terminal run something like this: node node_modules/react-native/local-cli/cli.js start --projectRoots <ABSOLUTE PATH TO PROJECT>/storybook,<OTHER ROOTS> --root <ABSOLUTE PATH TO PROJECT>. This feels like a workaround option for sure but it should get the desired outcome.

2. A PR to make projectRoots in the storybook cli accessible via command line. Changes should be housed 100% in this file: https://github.com/storybooks/storybook/blob/master/app/react-native/src/bin/storybook-start.js#L69

I think the 2nd option should happen no matter what since I would say that most of the options available to react-natives cli start command should be available to be passed through the start storybook cli command.

[ndelangen]

Would you be interested in making that into a PR @rmevans9 ?

[rmevans9]

Yes but it likely will not be till next week at some time that I can do so.

[xareelee]

@rmevans9 could you also add --root to storybook cli?

In this issue, I need to add --root for the additional search path when bundling to solve this problem.

[rmevans9]

Yes, my plan is to take an inventory of what options you can pass react-native start and make them work with the storybook cli.

[ndelangen]

Awesome, let me know if there's anything I can do to help you!

[rmevans9]

Due to Hurricane Irma knocking out my power this might be a little delayed. I will still be doing it... just has to wait till I have power again.

[ndelangen]

I think is is actually resolved with #1865