Storybook 8 with Meteor

packages
1

Storybook 8 is out and there is a lot of interesting news. As I’m upgrading to Meteor 3, I’m also upgrading to Storybook 8.

In my setup I use Webpack, but there is also Vite option. So I was wondering is anyone has a nice setup for Storybook 8 that works with Meteor (either 2 or 3) that they could share, so that we might be able to create some sort of a template for everyone. I’m thinking that if Meteor switches to Vite in the future we could more easily integrate with Storybook. Thoughts?

2 Likes
2

This is probably true.

I never set up Storybook with Meteor, not sure how to do it. I can ask our team to test it as well.

3

I think we really need a simple setup for Storybook, the original idea started in Meteor and it is an industry standard at this point.

2 Likes
4

I’ve used Storybook in my previous company and it runs independently of Meteor 3 using Vite. I can create a template for it.

5 Likes
5

That would be great. The big thing is to be able to add mocks of Meteor packages.

I would also like to see an option where we could in some settings define things like users so that we could switch between different types of users in Storybook, but that is above the minimum we need now.

6

I am bumping into the same issue.
Here is an approach that has been developped some months ago that I will try to integrate : [Solved] Storybook can't resolve Meteor packages - #10 by mikkelking
Repo is here : GitHub - Back2Dev/meteor-storybook-stubs: Some stubs to make it easier to use Storybook in a Meteor project

[edit] : I confirm it works for basic usage with some modification to the storybook webpackfinal function

        const mocks = {
            // Meteor core modules
            "meteor/meteor": "meteor/meteor.js",
            "meteor/mongo": "meteor/mongo.js",
            "meteor/tracker": "meteor/tracker.js",
            "meteor/random": "meteor/random.js",
            "meteor/check": "meteor/check.js",
            "meteor/session": "meteor/session.js",
            "meteor/react-meteor-data": "meteor/react-meteor-data.js",
            // Meteor packages
            "meteor/alanning:roles": "meteor/packages/alanning-roles.js",
            "meteor/universe:i18n": "meteor/packages/universe-i18n.js",  // <- I added this one myself
        };
        if (!config.resolve) {
            config.resolve = {};
        }
        if (!config.resolve.alias) {
            config.resolve.alias = {};
        }
        Object.keys(mocks).forEach((key) => {
            config.resolve.alias[key] = path.resolve(__dirname, `./__mocks__/${mocks[key]}`);
        });
1 Like
7

Right now I’m trying to re-install Storybook 8 with Vite as the build tool in future preparations for potentially switching to Vite. Sadly I’m getting the following error:
Unhandled promise rejection: Error: EMFILE: too many open files

Anyone has experience something similar?

8

Not the same problem, but I have trouble running mongo from Homebrew with a similar error message. Things like the number of files in node_modules being watched can be a problem. It might be an idea to try and limit the directories being watched

9

Tried to go back to webpack and same issue.
Found this issue in Storybook:

But I don’t think that is the root issue.
@mikkelking any ideas how we limit this. From the logs I’m getting I even get the feeling that it is trying to watch my entire hard drive.

10

Interestingly, when I fist start Storybook after a restart of the computer I don’t get that error.