[Bug] Doesn't work with CRA + SASS + Typescript

[mattveraldi]

Describe the bug

The build of storybook is broken.

Steps to reproduce the behavior

1. create a new project with CRA, template typescript
2. npx sb init to install storybook
3. add sass support installing 'node-sass'
4. add @storybook/preset-scss following the README.md for configuration
5. add bootstrap and a file _variables.scss with custom variables settings
6. I imported the scss file in the Button (after removing the css reference).
7. yarn storybook

Expected behavior

I expected the build to pass and show me the button with correct styles.

Screenshots and/or logs

Environment

• OS: Windows 10 + WSL2 Ubuntu 20.04 LTS
• Node.js version: v12.20.1
• NPM version: 6.14.10

[birksy89]

I think I'm getting the same issue, specifically using Ant Design.

Did you manage to make any progress finding a solution?

[SGoldenGraham]

I am also running into this running Angular 11 & Tailwindcss

[kintz09]

I'm getting the same errors in a fresh CRA application with typescript, sass ('sass' not 'node-sass'), and storybook.

Relevant Package Versions:

• "react": "^17.0.1",
• "react-dom": "^17.0.1",
• "react-scripts": "4.0.3",
• "sass": "^1.32.8",
• "@storybook/addon-actions": "^6.1.21",
• "@storybook/addon-essentials": "^6.1.21",
• "@storybook/addon-links": "^6.1.21",
• "@storybook/node-logger": "^6.1.21",
• "@storybook/preset-create-react-app": "^3.1.7",
• "@storybook/preset-scss": "^1.0.3",
• "@storybook/react": "^6.1.21",

The .storybook/main.js File

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]',
        }
      }
    }
  ],
}

FWIW, I also get the same error when using the string entry instead of the object for the @storybook/preset-scss sass preset.

Error on Compile

Storybook compiles fine until I import any .scss file into one of my components or in .storybook/main.js. This error was created by importing my main.scss file into .storybook/preview.js.

ERROR in ./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--9-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-6-4!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
  │                                                                                               ^
  ╵
  src/styles/main.scss 1:95  root stylesheet
 @ ./src/styles/main.scss 2:26-432 53:4-74:5 56:18-424
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js

[jpaholik]

I have the same problem. Any help would be appreciated

[skworden]

I was getting this issue with Nextjs, tailwind (JIT), and custom scss.

I'm using storybook 6.2.0-rc.1 because I was also getting an nextjs dependency error that said this storybook required postcss 8. I also switched to webpack 5 and dumped the scss preset module. I couldn't get it to work with less than SB 6.2.0, webpack 5, or with the SB scss preset module.

It seems to work as expected now.

I was also having problems with storybook resolving the baseUrl set in my tsconfig. I left the solution but commented in case someone else needs to set theirs correctly and comes across this.

here is my complete main.js config

You will have to set your main directory path mine is ../src

const path = require('path');

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // resolve baseUrl path set in tsconfig
    // config.resolve.modules = [
    //   ...(config.resolve.modules || []),
    //   path.resolve(__dirname, '../src'),
    // ];
    // include scss files
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true, //scss is considered a side effect of sass
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      // include: path.resolve(__dirname, '../src'), // I didn't need this path set
    });
    return config;
  },
};

my preview.js is pretty standard

import '../src/styles/global.scss';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

I do not have anything else configured and mine is a fresh install of SB.

[kml1990]

Faced the same issue. Managed to fix it by doing following steps:

1 I've added a main scss file that imports all my scss files in styles.scss. 2. I've added following import to preview.js import '!style-loader!css-loader!sass-loader!../src/styles/styles.scss'; 3. Downgraded sass-loader to "^10.1.1",

My main.js is standard with @storybook/preset-scss addon added.

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/preset-scss',
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/preset-create-react-app',
    ],
};

[NSpencer4]

@kml1990 What version are you using for SB? I am still getting the same reported error.

I am using the following packages that may be relevant:

    "css-loader": "^3.6.0",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "css-loader": "^3.6.0",
    "@storybook/builder-webpack4": "^6.2.3",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/addon-actions": "^6.2.3",
    "@storybook/addon-docs": "^6.2.3",
    "@storybook/addon-essentials": "^6.2.3",
    "@storybook/addon-links": "^6.2.3",
    "@storybook/addons": "^6.2.3",
    "@storybook/node-logger": "^6.2.3",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.3",
    "style-loader": "^1.3.0",
    "typescript": "^4.2.3",
    "webpack": "^4.46.0"

My main.ts is:

module.exports = {
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(ts|tsx)'
  ],
  addons: [
    '@storybook/preset-scss',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app'
  ],
};

My preview.ts is:

import '!style-loader!css-loader!sass-loader!../src/styles/theme/theme.scss';

export const parameters = {
  actions: {argTypesRegex: "^on[A-Z].*"},
  backgrounds: {
    default: 'white',
    values: [
      {
        name: 'white',
        value: '#ffffff',
      },
      {
        name: 'grey',
        value: '#cccccc',
      },
    ],
  },
}

The error I am getting is:

SassError: SassError: expected "{".
  ╷
1 │ var api = require("!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
  │                                                                                                     ^
  ╵
  src\components\typography\Heading\Heading.module.scss 1:101  root stylesheet

This seems to be the same error regardless of if I am using an SCSS module or not imported into my React component's tsx.

I have not tried the newest versions of SB that utilizes Webpack 5 but am thinking that is the next route to try.

[kml1990]

@NSpencer4 I am using version 6.2.1.

The other packages are as follow:

"@storybook/addon-actions": "^6.2.1",
"@storybook/addon-docs": "^6.2.1",
"@storybook/addon-essentials": "^6.2.1",
"@storybook/addon-links": "^6.2.1",
"@storybook/node-logger": "^6.2.1",
"@storybook/preset-create-react-app": "^3.1.7",
"@storybook/preset-scss": "^1.0.3",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.2.1",
"css-loader": "^5.2.0",
"sass-loader": "^10.1.1",
"sass": "^1.32.8",
"style-loader": "^2.0.0",

[NSpencer4]

Thank you! I was behind on my css-loader and style-loader. Once I bumped those up everything started working just fine. I didn't even need @storybook/preset-scss. Thank you greatly @kml1990 I owe you a beer 🍺

[kml1990]

Thank you! I was behind on my css-loader and style-loader. Once I bumped those up everything started working just fine. I didn't even need @storybook/preset-scss. Thank you greatly @kml1990 I owe you a beer 🍺

No problem at all. Happy I was able to help.

[rolfed]

I'm getting the same issue with Angular workspaces, Tailwind and Storybook. Has anyone successfully set this up with Angular workspaces?

[will-tonic]

Ran into this issue using CRA, Storybook, and Sass. Solved my issue by removing @storybook/preset-scss from the addons

[Radamanthys0]

Hi guys, I had the same issue. I manage to solve that by following the answer in: https://lifesaver.codes/answer/global-styles-in-ng-12-2-with-version-6-3-15855.

basically i put the following code on angular.json:

"projects": { [...] "storybook": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "tsConfig": "tsconfig.json", "styles": [ // Add your global stylesheets ], "scripts": [] } } } } }

after that I dind't even needed the @storybook/preset-scss.