Custom webpack config when using react-native server #92
Comments
|
I'm not sure I understand, is there some issue with storybook here or is this a question about configuring lerna? Also you didn't state what happens when you try to run the server, does it fail is there an error? |
|
In react storybook I can give aliases/module resolve config like But same can't be done in the case of react native storybook. I have folder structure like this:
And regarding you question about running server, it will work fine if I don't enable addon-ondevice. In case I enable it then the plugin won't be able to find react-native package and it will fail to start. |
|
Well its possible to have an alias but this isn't a storybook feature, in the react version you are using webpack to do that. In react native by default bundler is metro and webpack is not present. In order to achieve the same results with RN you can use the babel plugin for module resolution, try this one. Or you can try using some metro config like this and just change the extra node modules to be the directory you want |
|
But the error is not in mobile app. it's inside storybook-react-native server. So I don't think it's related to react native metro bundler. Below are the logs that I get when the server is started. I also have a module resolver config like but don't think that will be applied to this file as it's from node_modules folder. |
|
The action addon should probably not be the on device version for the server though, on device is the version that shows on the phone. I'm not sure about the server setup because I don't use it, but maybe try the regular action addon. |
When I use the normal addons plugins in my addons file as above, the metro bundler will throw this error: |
|
OK I'm not really sure without having an example project to test things, I might be able to try it out next week. Let me know if you find a solution in the mean time. |
|
I have this issue too, with the following dependencies in a fresh Expo SDK 38 project: "dependencies": {
"@react-native-community/async-storage": "~1.11.0",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-knobs": "^6.0.21",
"@storybook/addon-ondevice-actions": "^5.3.21",
"@storybook/addon-ondevice-knobs": "^5.3.21",
"@storybook/react-native": "^5.3.21",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-web": "~0.11.7"Error: The given expo snack with different dependencies still works for me, though: https://snack.expo.io/@dannyhw/expo-storybook-example |
|
@zlanich Not sure without seeing your app entrypoint but it seems like you might be using app registry in expo. When using expo you don't need to use Also with react native storybook you should only use storybook dependencies with version 5.3.x since we don't support 6.0 yet. |
|
@dannyhw I saw that in the docs and took care of that. Here's my App.tsx: import React from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import {
getStorybookUI,
configure,
addDecorator,
} from '@storybook/react-native';
import { register as registerKnobs, withKnobs } from '@storybook/addon-ondevice-knobs';
import { register as registerActions } from '@storybook/addon-ondevice-actions';
registerKnobs();
registerActions();
addDecorator(withKnobs);
configure(() => {
require('./src/stories');
}, module);
const StorybookUIRoot = getStorybookUI({
asyncStorage: AsyncStorage,
});
export default StorybookUIRoot;it appears this error pops up immediately, just by having the addons libraries installed at all. Even if I completely comment out all imports and related code within my project, it still throws the error until I uninstall the addon packages. :-/ |
|
@zlanich in your package json you had 6.0 dependencies, please revert them to 5.3.21 and see if that helps. should be If you are unable to fix this then please open a new issue explaining the specific issue and if possible with a reproduction branch as explained in the contributing docs. |
|
I have a same problem, storybook not working, shows only loading forever. steps to reproduce:
|
|
@impactro this does not relate to the issue explained in the initial issue description. There are other issues more relevant to the issue you are describing. Anyway you should start the server before the mobile app since it usually works better this way in my experience. Then in the device try refreshing the device with the shake gesture or ctrl/cmd + R. Usually after refreshing the app once things should start to appear on the server. If you continue to experience issues then create a reproduction branch as described in the contributors documentation and make an issue with a link to the branch. |
|
I believe this is related to the initial question. My idea is to create an internal component library for our organisation. The packages directory contains two workspaces, components and example (It could possibly contain more in the future). |
|
@Brendon127 the issue here is describing a issue with webpack. Metro is the react native bundler and webpack is only used for react native web so it probably doesn't relate to your problem. Also your issue isn't really a storybook issue, it's more of a react-native or metro one. Don't worry about it though :). If you have general questions about storybook usage like this the discord might be a better place for it, I'm active there in the react-native channel. Anyway you should be able to acheive what you want using lerna and yarn workspaces. You just need to list the components package with the version from the repo in your package.json, this repo uses this approach to be able to import a local versions of the react native storybook packages. |
|
Hello, I put all my code in this repository, in case you want to download and evaluate what is wrong |
|
@impactro are you using expo and a real android device? if so I've made comments in other issues regarding this see here #55 (comment) |
|
Most of the discussion here is off topic and the actual issue has no activity for some time. I'm working on a guide for using storybook in a mono repo which could help with these issues. However I believe the issues experienced are more related to react native and metro rather than storybook itself. I'll be closing this issue due to inactivity, let me know if you want to reopen. Thanks. |
|
@dannyhw Did you ever manage to create that guide? I want to achieve the same as @Brendon127, basically
But I am just going around in circles as this point. I think there are major version clashes in this scenario, and as soon as I fix one thing some other issue pops up... |
|
@expelledboy I didn't make the guide yet but if you want you can message me on discord I can try and help you with your project. You can find me in the react-native channel of the storybook discord. |
|
@dannyhw I am having the same problem with the sidebar not loading I did everything but still can't solve it |
Describe the bug
I have lerna monorepo with storybook and react native project in different packages. React native is in mobile project's node_modules. the storybook package has storybook react native and @storybook/addon-ondevice-actions. Is there any way to add custom webpack alias config for allowing the react-native from mobile project package to be loaded by @storybook/addon-ondevice-actions which is in different package?
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Custom webpack config can be applied like react storybook
The text was updated successfully, but these errors were encountered: