Unable to resolve "@storybook/addon-react-native-web/register"

[7SilviaT]

I am working on a RN app and the task is implement storybook and visualize components in web and emulators(android/ios). Following the steps in this link: https://levelup.gitconnected.com/introducing-react-native-web-storybook-3c56d48a6508 I have the error Unable to resolve "@storybook/addon-react-native-web/register" from ".storybook/storybook.requires.js" when run storybook in emulator ( displays in the web fine).

The package react-native-web is already installed, and yhe package json is:

`"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"storybook-generate": "sb-rn-get-stories",
"storybook-watch": "sb-rn-watcher",
"storybook": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start",
"storybook:ios": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --ios",
"storybook:android": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED='true' expo start --android",
"storybook:web": "start-storybook -p 6006 -c .storybook-web",
"build-storybook": "build-storybook -c .storybook-web"
},

`
Is the script to run storybook in emulator correct?
When running the script sb-rn-stories the storybook.requires.js is:

`/* do not change this file, it is auto generated by storybook. */

import {
configure,
addDecorator,
addParameters,
addArgsEnhancer,
clearDecorators,
} from "@storybook/react-native";

global.STORIES = [
{
titlePrefix: "",
directory: "./components",
files: "*/.stories.?(ts|tsx|js|jsx)",
importPathMatcher:
"^\.\\/$",
},
];

import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-actions/register";
import "@storybook/addon-react-native-web/register";

import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";

import { decorators, parameters } from "./preview";

if (decorators) {
if (DEV) {
// stops the warning from showing on every HMR
require("react-native").LogBox.ignoreLogs([
"clearDecorators is deprecated and will be removed in Storybook 7.0",
]);
}
// workaround for global decorators getting infinitely applied on HMR, see storybookjs/react-native#185
clearDecorators();
decorators.forEach((decorator) => addDecorator(decorator));
}

if (parameters) {
addParameters(parameters);
}

try {
argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
} catch {}

const getStories = () => {
return {
"./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
"./components/Link/Link.stories.tsx": require("../components/Link/Link.stories.tsx"),
"./components/TextInput/TextInput.stories.tsx": require("../components/TextInput/TextInput.stories.tsx"),
};
};

configure(getStories, module, false);`

Any help is appreciated,thanks in advance.

[dannyhw]

@7SilviaT you can't include addon-react-native-web in the react native addons since its a web specific addon.

addon-react-native-web is used on a reactjs storybook to make stories load on the web.

[joevaugh4n]

Thanks for jumping in here, @dannyhw!

[nathanbedford]

@dannyhw I'm a bit confused - the readme indicates we should be adding this to the 'addon's property in main.js::

.storybook/main.js

module.exports = {
  addons: [/*existing addons,*/ '@storybook/addon-react-native-web'],
}

[dannyhw]

not for the ondevice storybook, it should be on the web storybook

[dannyhw]

usually you have a config for web and another for native

[nathanbedford]

Thanks for the clarification!