search

emulsify-ds / compound

Compound is the default component collection for Emulsify
https://emulsify-ds.github.io/compound/
GNU General Public License v2.0
12 stars 12 forks source link

[BUG] Error starting Storybook - images/icons directory is incorrect #105

Open codechefmarc opened 6 months ago

codechefmarc commented 6 months ago

Describe the bug When starting Storybook for the first time after a clean install of Emulsify and Compound (default components), Storybook will not start and instead return an error:

ERROR in ./components/01-atoms/images/images.stories.js 1:1762-1815
Module not found: Error: Can't resolve '../../../images/icons/' in 'components/01-atoms/images'
 @ ./components/ lazy ^\.\/.*$ include: (?:\/components(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.stories\.(js%7Cjsx%7Cts%7Ctsx))$ chunkName: [request] namespace object ./01-atoms/images/images.stories.js ./01-atoms/images/images.stories
 @ ./storybook-stories.js 23:11-27:5

The error seems to be related to line 8 in components/01-atoms/images/images.stories.js:

const svgIcons = require.context('../../../images/icons/', true, /\.svg$/);

Which points to a non-existent images directory in the root of the theme. Instead, this should point to the assets/icons directory that does exist in the root of the theme.

To Reproduce Steps to reproduce the behavior:

  1. Install Emulsify as per https://www.emulsify.info/docs/emulsify-drupal
  2. Go into the newly created theme directory and run emulsify system install compound
  3. Run npm install
  4. Then, run npm run storybook
  5. See error that is shown above.

Expected behavior Storybook should run without errors.

Desktop (please complete the following information):

sync-by-unito[bot] commented 3 months ago

➤ Callin Mullaney commented:

Resolution is part of Release 2.0 - https://github.com/emulsify-ds/compound/pull/107/files#diff-cafe2123a72c4ce3a9f7e9ee4b0e188256eb02d7ec1e54fa2cadfac99b22f92bR11