[BUG] Errors with Storybook 7 using Emulsify CLI

[fogpuddle]

With the update to Storybook 7, I am now getting errors when installing Emulsify through the CLI, mostly Sass errors involving variables not being found like the following:

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 24 │ $outer-container-break: $small; │ ^^^^^^ ╵ components/00-base/00-defaults/_03-mixins.scss 24:25 root stylesheet at processResult (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/webpack/lib/NormalModule.js:569:23) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/webpack/lib/NormalModule.js:647:9 at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/loader-runner/lib/LoaderRunner.js:361:14 at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/loader-runner/lib/LoaderRunner.js:227:14 at context.callback (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/loader-runner/lib/LoaderRunner.js:116:16) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass-loader/dist/index.js:43:7 at Function.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:95478:18) at render_closure1.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:80992:14) at _RootZone.runBinary$3$3 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:29177:20) at _FutureListener.handleError$1 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27763:23) at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:28063:51) at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3743:79) at _Future._completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27910:11) at _AsyncAwaitCompleter.completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27574:14) at Object._asyncRethrow (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3550:19) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:19509:22 at _wrapJsFunctionForAsync_closure.$protected (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3573:17) at _wrapJsFunctionForAsync_closure.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27593:14) at _awaitOnObject_closure0.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27587:27) at _RootZone.runBinary$3$3 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:29177:20) at _FutureListener.handleError$1 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27763:23) at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:28063:51) at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3743:79) at _Future._completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27910:11) at _AsyncAwaitCompleter.completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27574:14) at Object._asyncRethrow (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3550:19) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:15066:22 at _wrapJsFunctionForAsync_closure.$protected (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3573:17) at _wrapJsFunctionForAsync_closure.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27593:14) at _awaitOnObject_closure0.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27587:27) at _RootZone.runBinary$3$3 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:29177:20) at _FutureListener.handleError$1 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27763:23) at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:28063:51) at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3743:79) at _Future._completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27910:11) at _AsyncAwaitCompleter.completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27574:14) at Object._asyncRethrow (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3550:19) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:15095:22 at _wrapJsFunctionForAsync_closure.$protected (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3573:17) at _wrapJsFunctionForAsync_closure.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27593:14) at _awaitOnObject_closure0.call$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27587:27) at _RootZone.runBinary$3$3 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:29177:20) at _FutureListener.handleError$1 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27763:23) at _Future__propagateToListeners_handleError.call$0 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:28063:51) at Object._Future__propagateToListeners (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3743:79) at _Future._completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27910:11) at _AsyncAwaitCompleter.completeError$2 (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:27574:14) at Object._asyncRethrow (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3550:19) at /Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:69656:22 at _wrapJsFunctionForAsync_closure.$protected (/Applications/MAMP/htdocs/storybook-uireview/web/themes/custom/demo/node_modules/sass/sass.dart.js:3573:17)

Maybe the error is a result of the compound system being installed? I had no issue with the Emulsify CLI when Emulsify Drupal was using Storybook 6.4.

To Reproduce (with a Drupal 10 install with the compound system)

1. Create Drupal Project: composer create-project drupal/recommended-project [PROJECT_NAME] --no-interaction

2. Move into the project directory cd [PROJECT_NAME]

3. Install Emulsify client globally npm install -g @emulsify/cli

4. Initialize your theme with emulsify emulsify init "[THEME NAME]"

5. Install the version of Drupal componentst works with Drupal 10 composer require 'drupal/components:^3.0@beta'

6. Install the version of emulsify_twig that work with Drupal 10 composer require 'drupal/emulsify_twig^4.0' `

7. Move into the theme directory cd web/themes/custom/[THEME NAME]

8. Install Compound System emulsify system install compound

9. Start the watch task and run Storybook to where errors are seen npm run develop

Expected behavior The expected behavior is that Storybook 7 spins up on localhost with no errors.

Desktop (please complete the following information):

• OS: MACOS
• Node: 18.16.1
  • Emulsify Drupal: 1.0.0

┆Issue is synchronized with this Clickup by Unito

[shishirphadke]

I have a temporary fix for this:

1. Update Storybook and all its dependencies from ^7.0.7 to ^7.0.27 in package.json file in the theme folder and run npm install

2. In the preview.js file add a return statement for the Story() function like the following snippet:

   export const decorators = [
   (Story, { args }) => {
   const { renderAs } = args || {};
   
   // Usual emulsify hack to add Drupal behaviors.
   useEffect(() => {
     Drupal.attachBehaviors();
   }, [args]);
   return Story();
   },
   ];

   That's it. I tried creating a PR to fix the above issue but I cannot do so as I don't have permission to create PR.