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

@storybook/react-native/scripts/generate.js is breaking with latest storybook #660

Closed
satheshrgs-rksv opened this issue Dec 9, 2024 · 12 comments

Comments

@satheshrgs-rksv
Copy link

my main.ts file looks like this

// modules
import { StorybookConfig } from '@storybook/react-native';

// NOTE: if you are updating this file make sure to run `npm run storybook-generate`

const main: StorybookConfig = {
  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-actions',
    './customAddon/theme',
  ],
};

export default main;

After recently upgrading to latest 8.4.3 version, ./customAddon/theme is being excluded from the storybook.requires.ts file. From my analysis, this is happening due to https://github.com/storybookjs/react-native/pull/612/files#diff-1582b6229d57d69f719432d26ae15f723fb028825d8a6eb465c0e2fc796c7be8R54 by @onmotion. Kindly suggest on steps to fix it. This is a local addon and i can't export it

@dannyhw
Copy link
Member

dannyhw commented Dec 9, 2024

If you make the file in your custom addon folder be preview.js does it work?

You need either a register file or a preview file otherwise it wouldn't work even before 8.4.3 as far as i can tell

@satheshrgs-rksv
Copy link
Author

That is also failing

@satheshrgs-rksv
Copy link
Author

Error: Cannot find module './customAddon/theme/preview.js'
Require stack:
- /Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/common.js
- /Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/generate.js
- /Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/get-stories.js
- /Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/bin/get-stories.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._resolveFilename (/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/esbuild-register/dist/node.js:4799:36)
    at Function.resolve (node:internal/modules/helpers:188:19)
    at resolveAddonFile (/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/common.js:78:15)
    at generate (/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/generate.js:69:25)
    at Object.<anonymous> (/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/get-stories.js:5:1)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/common.js',
    '/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/generate.js',
    '/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/scripts/get-stories.js',
    '/Users/satheshrgs/workspace/mobile/ui-lib/node_modules/@storybook/react-native/bin/get-stories.js'
  ]
}

@dannyhw
Copy link
Member

dannyhw commented Dec 9, 2024

If you can create a reproduction then im happy to debug too

@onmotion
Copy link
Contributor

onmotion commented Dec 9, 2024

Can you try to resolve (path.resolve) the full path to the module maybe?

@satheshrgs-rksv
Copy link
Author

satheshrgs-rksv commented Dec 9, 2024

require('path').resolve(__dirname, './customAddon/theme') this works, but it will also contains the full path and will not be able to commit to git. Sample output in the storybook.requires.ts file will be import "/Users/satheshrgs/workspace/mobile/ui-lib/.storybook/customAddon/theme/register";

Manually adding import "./customAddon/theme/register"; in the autogenerated file .storybook/storybook.requires.ts for now works

@dannyhw
Copy link
Member

dannyhw commented Dec 9, 2024

@satheshrgs-rksv you don't really need to commit the requires file though since its generated, is there a reason you would want to commit it?

@satheshrgs-rksv
Copy link
Author

Got it, just noticed that it gets generated while doing npm start, I hope it's not required

@dannyhw
Copy link
Member

dannyhw commented Dec 9, 2024

Either way I will try to create an example and see if I see a similar problem, it should work for relative paths ideally.

@dannyhw
Copy link
Member

dannyhw commented Dec 12, 2024

Hey @satheshrgs-rksv I fixed relative local addons in this version 8.4.4-alpha.0 if you could try it out that would be great 🙏

@satheshrgs-rksv
Copy link
Author

@dannyhw I have tested and it works, Thanks 🙏

@dannyhw
Copy link
Member

dannyhw commented Dec 28, 2024

fixed in 8.4.4

@dannyhw dannyhw closed this as completed Dec 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants