Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
StarHosea opened this issue Dec 5, 2022 · 4 comments
Open

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

StarHosea opened this issue Dec 5, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@StarHosea
Copy link

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 StarHosea added the bug Something isn't working label Dec 5, 2022
@StarHosea
Copy link
Author

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

@StarHosea StarHosea changed the title [Bug] [Bug] storybook try to load native code in web mode Dec 5, 2022
@StarHosea
Copy link
Author

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

@dannyhw
Copy link
Member

dannyhw commented Dec 5, 2022

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

@tomas-phillips-95
Copy link

tomas-phillips-95 commented Jun 12, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants