[Solved] Storybook can't resolve Meteor packages

react
1

I’m getting this issue while trying to run React Storybook for my Meteor project:

ModuleNotFoundError: Module not found: Error: Can't resolve 'meteor/accounts-base' in ...

I know that this error popped up because of using Meteor packages inside React components.
I have dug up other topics like this but can’t find a good solution. Are there any update solutions for this issue?
Thank you in advance!

2

You could use:

  1. pure components which will use meteor API as props
  2. stub like in this article:
    How to stub VueJS (React) container components in Storybook | by Alexey Antipov | Vue.js Developers | Medium
2 Likes
3

Thank you @krisnero :saluting_face:. Stub components can be a better solution for me right now.
Hope that meteor will provide us a more convenient way in the future :roll_eyes:

4

@ryan0906 this is not really a “Meteor” issue, it is an approach to writing pure components. If you don’t make API calls from your components, the benefits you can get are

  • Components are easier to test and preview (no stubs required)
  • You can use tools like Storybook
  • Your components are portable, because they are not embedded in your infrastructure
  • Your API code is separate, and can be tested independently of presentation

It requires some discipline on your part, but it will ultimately make your life easier.

1 Like
5

Thank you, @mikkelking , for the advice :saluting_face:. I should bring this to my team.

6

Still, it would be nice to have some nice way to stub the Meteor functions and packages.

7

@storyteller I guess it would be nice, the challenge is to provide some kind of stubbing that will cover everyone’s use cases. It could be a big project, perhaps worthwhile?

1 Like
8
Using pure components worked like a charm. Had a difficult time understanding what that meant though but when I do, it finally worked well for me. Thank you.
2 Likes
9

When I get the resources around Literary Universe I would like to dedicate a developer to take a look on it. I can imagine that there should be some nice way that would also extend Storybook itself where you could then select to see how the component looks when there is no user logged in and when logged in with different types of users. Right now it can be done with extra code via pure components, but I would like a plugin that would cover this via stubs of functions hooks like useUser and relevant Meteor functionality. This should also cover things like the Roles package.

But for now pure components are the way.

10

In the mean time I did some stubbing myself (for expediency). It makes things easier.

See git@github.com:Back2Dev/meteor-storybook-stubs

Happy for others to contribute

2 Likes