ERR! SassError: expected "{"

[debonx]

I am getting the following error when I do nx build-storybook @my-project-name:

ERR! => Failed to build the preview
ERR! Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ERR! SassError: expected "{".
ERR!   ╷
ERR! 2 │       import API from "!../../../../../node_modules/@nrwl/web/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";

I am working with nx on the default storybook configuration for workspace. This started to happen when we imported some global .scss

My .storybook/main.js

module.exports = {
  stories: [],
  addons: ['@storybook/addon-essentials', "@storybook/preset-scss"]
}

My frontend/<my-project-name>/.storybook/main.js

const rootMain = require('../../../.storybook/main')

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../../<my-project-name>/lib/**/*.stories.mdx',
    '../../<my-project-name>/lib/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook']
}

My nx report

   Node : 16.14.2
   OS   : darwin x64
   yarn : 1.22.19

   nx : 14.5.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.5.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.5.2
   @nrwl/eslint-plugin-nx : 14.5.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.5.2
   @nrwl/js : 14.5.2
   @nrwl/linter : 14.5.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 14.3.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.5.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.5.2
   @nrwl/web : 14.5.2
   @nrwl/workspace : 14.5.2
   typescript : 4.4.2
   ---------------------------------------

This repo https://github.com/mandarini/sb-scss-bug has been created to showcase a similar issue. Note. This issue was initially posted here.

Can you please give suggestions / support?

Thanks.

[mandarini]

Posting here as well, that's not an issue with Nx. The reproduction repository I created which is linked in the issue description (https://github.com/mandarini/sb-scss-bug) is a plain React app, generated with create-react-app, and then I used npx sb init.

[parky128]

Same for me, only this time with an Nx 12 workspace, repo where you can see it breaking here

[mamzellejuu]

Same for me

[danielriddellsh]

Any update on this? I did an npx update and now it fails

[shilman]

@Integrayshaun is this something you can help with?

[ShaunEvening]

Hey folks! I can certainly help with this. I'm at a spa for the day so I won't be able to dig in until tomorrow.

However, in the meantime, I'd recommend removing the preset-scss addon from your main.js as this seems to cause more issues than solve.

[halodevcr]

any updated on this issue? I was facing the same problem

[ShaunEvening]

Hey folks! I have a quick update for you all.

For those using Next.js 12 and 13 Have you tried upgrading to Storybook 7.0 so that you can make use of our new Framework config for Storybook + Next.js?

Here's our recipe for getting started with Next + Storybook 7.0

If you don't have a Next.js project Please share more details about your project with me so I can dig in a little more.

• What frmamework are you using?
• what version are your storybook packages?
• Can your share your main.js and preview.js files with me.

For everyone, please don't use the preset-scss addon. We plan on deprecating it shortly as it often causes other unexpected problems.

[Lonli-Lokli]

@Integrayshaun Have you tried all reproductions from this thread?

[ShaunEvening]

Hey @Lonli-Lokli!

I have, yes 😀 Once I removed the scss-preset from the addons in sb-scss-bug it worked as expected

[FK78]

Hey @Lonli-Lokli!

I have, yes 😀 Once I removed the scss-preset from the addons in sb-scss-bug it worked as expected

I am getting a similar error, but am not using scss-preset.

https://github.com/storybookjs/storybook/issues/21592

[davidjentjensps]

I am getting the same error without using scss-preset. Here is my .storybook/main.ts file:

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-next',
    'storybook-addon-sass-postcss',
    {
      name: '@storybook/addon-styling',
      options: {
        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
        // For more details on this addon's options.
        postCss: true,
        rule: {
          test: /\.(scss|sass)$/i,
        },
        loadSassAfterPostCSS: true,
        sass: {
          // Require your Sass preprocessor here
          implementation: require('sass'),
        },
      },
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;

[ShaunEvening]

@davidjentjensps

When using @storybook/nextjs you don't need to configure sass. You should uninstall storybook-addon-next and storybook-addon-sass-postcss and update your config to something like:

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      options: {},
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;

[consuelo-sanna]

Hi guys, I'm having the same issue but I still have not figured out how to solve it, all of the information/files are in this thread -> https://github.com/storybookjs/addon-styling-webpack/issues/23

can someone point me in the right direction? I did not wanted to add them in here too to avoid noise but I can if needed