Storybook: Module addons.js not found when running Storybook

[chawax]

I am migrating a React Native project from 0.55.4 to 0.57.2 and because of Babel 7 I need to migrate to Storybook 4 too. I changed the dependencies in package.json but when I run npm run storybook it fails because it can't resolve addons.js module.

Here is the full output when I run Storybook :

> [email protected] storybook /Users/olivierthierry/pro/react-native-socle
> storybook start -p 7007

=> Loading custom .babelrc from project directory.
=> Using default webpack setup based on "Create React App".
Scanning folders for symlinks in /Users/olivierthierry/pro/react-native-socle/node_modules (37ms)

React Native Storybook started on => http://localhost:7007/

webpack building...
webpack built 58432ddeadb374ff8077 in 6852ms
✖ ｢wdm｣: Hash: 58432ddeadb374ff8077
Version: webpack 4.20.2
Time: 6852ms
Built at: 2018-10-06 21:27:39
                   Asset       Size   Chunks             Chunk Names
static/manager.bundle.js   6.22 MiB  manager             manager
              index.html  997 bytes           [emitted]  
Entrypoint manager = static/manager.bundle.js
[./node_modules/@babel/runtime/helpers/createClass.js] 596 bytes {manager}
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 145 bytes {manager}
[./node_modules/@babel/runtime/helpers/objectSpread.js] 623 bytes {manager}
[./node_modules/@babel/runtime/helpers/possibleConstructorReturn.js] 343 bytes {manager}
[./node_modules/@storybook/podda/dist/index.js] 4.06 KiB {manager}
[./node_modules/@storybook/react-native/dist/manager/index.js] 457 bytes {manager}
[./node_modules/@storybook/react-native/dist/manager/provider.js] 3.96 KiB {manager}
[./node_modules/@storybook/ui/dist/compose.js] 707 bytes {manager}
[./node_modules/@storybook/ui/dist/context.js] 253 bytes {manager}
[./node_modules/@storybook/ui/dist/index.js] 2.19 KiB {manager}
[./node_modules/@storybook/ui/dist/modules/api/index.js] 696 bytes {manager}
[./node_modules/@storybook/ui/dist/modules/shortcuts/index.js] 442 bytes {manager}
[./node_modules/@storybook/ui/dist/modules/ui/index.js] 871 bytes {manager}
[0] multi ./node_modules/@storybook/react-native/dist/server/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {manager}
[./node_modules/global/window.js] 232 bytes {manager}
    + 574 hidden modules

ERROR in multi ./node_modules/@storybook/react-native/dist/server/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js
Module not found: Error: Can't resolve '/Users/olivierthierry/pro/react-native-socle/node_modules/@storybook/react-native/dist/server/addons.js' in '/Users/olivierthierry/pro/react-native-socle'
 @ multi ./node_modules/@storybook/react-native/dist/server/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]
ℹ ｢wdm｣: Failed to compile.

I could not find any information about this kind of error.

My Storybook dependencies in package.json:

    "@storybook/addon-actions": "4.0.0-alpha.24",
    "@storybook/addon-storyshots": "4.0.0-alpha.24",
    "@storybook/addons": "4.0.0-alpha.24",
    "@storybook/react-native": "4.0.0-alpha.24",

I am running on Mac OSX.

Thanks for your help

[kevincolten]

It looks like it's looking for a local addons.js file, and if not finding one, it looks inside node_modules/@storybook/react-native/dist/server/

https://github.com/storybooks/storybook/blob/master/app/react-native/src/server/config.js#L94

Quick fix is just to add an empty addons.js file inside your local storybook/ directory

[chawax]

Thanks, it helped me ! I use Typescript so I had a addons.ts file in storybook directory. Renaming it to addons.js made it. Anyway I think this default addons.js file, an empty one, should exist in Storybook dist files, right ?

I have other problems with missing module:metro-react-native-babel-preset, but I have to investigate further.