slice-machine icon indicating copy to clipboard operation
slice-machine copied to clipboard

Something wrong with storybook helper in slice-machine-ui

Open samuelhorn opened this issue 3 years ago • 4 comments

Versions

  • slice-machine-ui: v0.1.0
  • node: v16.10.0

Reproduction

Only tested locally so there's no link for reproduction right now.

Steps to reproduce

  • Start a new Nuxt project as the documentation states
  • Get storybook to work by importing the helper: import { getStoriesPaths } from 'slice-machine-ui/helpers/storybook'
  • Use the helper for the Storybook config:
...
storybook: {
    stories: [...getStoriesPaths()]
},
...

What is expected?

Storybook to run and work without problems

What is actually happening?

Getting a Nuxt fatal error stating that:

ERROR in ./.nuxt-storybook/storybook/generated-stories-entry.js
Module not found: Error: Can't resolve '../.slicemachine/assets' in '/Users/username/dev/nuxt-prismic-test/.nuxt-storybook/storybook'

And that error seems correct since that folder lives one more step up in the folder structure.

If you leave the stories as an empty array, Storybook will start, but obviously with no stories.

samuelhorn avatar Oct 04 '21 14:10 samuelhorn

Ok, so I found the issue. The slice-machine-ui/helpers/storybook.js has been updated to:

/** Called from user project */
const glob = require("glob");

const getStoriesPaths = () => {
  return [
    ".slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx|svelte)",
    "customtypes/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ].reduce((acc, p) => (glob.sync(p).length ? [...acc, `../${p}`] : acc), []);
};

module.exports = {
  getStoriesPaths,
};

If I skip using const { getStoriesPaths } = require('slice-machine-ui/helpers/storybook') in nuxt.config.js, and replace this with the old helper:

const glob = require("glob");
const path = require('path')

const getStoriesPaths = () => {
  return [
    path.normalize(`${process.cwd()}/.slicemachine/assets/**/*.stories.js`),
    path.normalize(`${process.cwd()}/customtypes/**/*.stories.js`)
  ].filter(e => glob.sync(e).length)
};

Then everything works again. Tell me if I should make a pull req. replacing the helper with the old version, or if you want to do something else with it.

samuelhorn avatar Oct 05 '21 12:10 samuelhorn

Thank you so much @samuelhorn 🙏

@hypervillain

lihbr avatar Oct 05 '21 13:10 lihbr

@hypervillain tell me if you want me to try with different node versions or anything else. Was also thinking this could be a PC/MAC issue as well, since it has to do with the filesystem in some way, IDK if you're on PC or MAC? Im doing this on MAC.

samuelhorn avatar Oct 05 '21 13:10 samuelhorn

Ok, found this one has a duplicate on the forums.

Maybe this should be closed then!

samuelhorn avatar Oct 05 '21 13:10 samuelhorn