addon-react-native-web icon indicating copy to clipboard operation
addon-react-native-web copied to clipboard

[Bug] storybook try to load native code in web mode

Open StarHosea opened this issue 2 years ago • 4 comments

image


"@storybook/addon-essentials": "6.5.13",
"@storybook/addon-links": "6.5.13",
"@storybook/addon-ondevice-actions": "6.0.1-beta.10",
"@storybook/addon-ondevice-backgrounds": "6.0.1-beta.10",
"@storybook/addon-ondevice-controls": "6.0.1-beta.10",
"@storybook/addon-ondevice-notes": "6.0.1-beta.10",
"@storybook/react-native": "6.0.1-beta.10",
"@storybook/addon-react-native-web": "0.0.19",
"@storybook/react": "6.5.13",
"@storybook/docs-tools": "6.5.13"

  • .storybook main.js
const path = require('path');
module.exports = {
  staticDirs: ['./public'],
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-react-native-web",
  ],
  framework: "@storybook/react",
  features: {
    storyStoreV7: true,
  },
  webpackFinal: async (config, { configType })=>{
    // Make whatever fine-grained changes you need
    // Return the altered config
    return config;
  }
};

tw-map-view folder like this

tw-map-view/
     __stories__
           index.stories.tsx
    index.ts
    TwMapView.native.tsx: which contains  native platform code
    TwMapView.tsx:  which only has web platform code


  • index.stories.tsx
import { TwMapView, TwMapViewSdk } from '../TwMapView';
export default {
  title: 'display/tw-map-view',
  component: TwMapView,
  parameters: {
    actions: { argTypesRegex: '^on.*' },
    docs: {
    },
  },
};
....some other code


I try some steps

  • delte TwMapView.native.tsx ,restart storybook , works fine
  • rename TwMapView to TwMapView.web.ts, rename TwMapView.native.tsx to TwMapView.tsx, storybook will break while loading TwMapview.tsx

StarHosea avatar Dec 05 '22 02:12 StarHosea

I created a repo to reproducre https://github.com/StarHosea/storybook-react-native-debug

StarHosea avatar Dec 05 '22 02:12 StarHosea

  • yarn dev to start storybook , will see error
  • delete TwMapView.native.tsx will work fine

StarHosea avatar Dec 05 '22 02:12 StarHosea

@StarHosea Thanks for the reproduction, I'll take a look soon 👍

dannyhw avatar Dec 05 '22 09:12 dannyhw

Hi, I'm running into this issue as well. Was there ever a resolution to this? Thanks!

Some context: I am updated storybook from version 6 to 7.

tomas-phillips-95 avatar Jun 12 '24 02:06 tomas-phillips-95