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

mattveraldi · 2021-02-26T19:39:10Z

Describe the bug

The build of storybook is broken.

Steps to reproduce the behavior

create a new project with CRA, template typescript
npx sb init to install storybook
add sass support installing 'node-sass'
add @storybook/preset-scss following the README.md for configuration
add bootstrap and a file _variables.scss with custom variables settings
I imported the scss file in the Button (after removing the css reference).
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 · 2021-03-11T12:06:01Z

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

Did you manage to make any progress finding a solution?

SGoldenGraham · 2021-03-11T12:20:49Z

I am also running into this running Angular 11 & Tailwindcss

kintz09 · 2021-03-11T20:20:59Z

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 · 2021-03-17T14:23:10Z

I have the same problem. Any help would be appreciated

skworden · 2021-03-18T21:36:20Z

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 · 2021-04-01T18:33:54Z

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 · 2021-04-09T16:19:55Z

@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 · 2021-04-09T16:39:55Z

@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 · 2021-04-13T13:33:44Z

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 · 2021-04-13T18:11:09Z

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 · 2021-09-02T20:57:34Z

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

will-tonic · 2022-03-11T18:31:12Z

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

Radamanthys0 · 2022-03-30T18:25:38Z

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.

mattveraldi added the bug Something isn't working label Feb 26, 2021

massivelines mentioned this issue Apr 6, 2021

SCSS preset is not working with latest node-sass #195

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mattveraldi commented Feb 26, 2021

birksy89 commented Mar 11, 2021 •

edited

Loading

SGoldenGraham commented Mar 11, 2021

kintz09 commented Mar 11, 2021

jpaholik commented Mar 17, 2021

skworden commented Mar 18, 2021 •

edited

Loading

kml1990 commented Apr 1, 2021 •

edited

Loading

NSpencer4 commented Apr 9, 2021 •

edited

Loading

kml1990 commented Apr 9, 2021 •

edited

Loading

NSpencer4 commented Apr 13, 2021 •

edited

Loading

kml1990 commented Apr 13, 2021

rolfed commented Sep 2, 2021

will-tonic commented Mar 11, 2022

Radamanthys0 commented Mar 30, 2022

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

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

Comments

mattveraldi commented Feb 26, 2021

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots and/or logs

Environment

birksy89 commented Mar 11, 2021 • edited Loading

SGoldenGraham commented Mar 11, 2021

kintz09 commented Mar 11, 2021

Relevant Package Versions:

The .storybook/main.js File

Error on Compile

jpaholik commented Mar 17, 2021

skworden commented Mar 18, 2021 • edited Loading

kml1990 commented Apr 1, 2021 • edited Loading

NSpencer4 commented Apr 9, 2021 • edited Loading

kml1990 commented Apr 9, 2021 • edited Loading

NSpencer4 commented Apr 13, 2021 • edited Loading

kml1990 commented Apr 13, 2021

rolfed commented Sep 2, 2021

will-tonic commented Mar 11, 2022

Radamanthys0 commented Mar 30, 2022

birksy89 commented Mar 11, 2021 •

edited

Loading

skworden commented Mar 18, 2021 •

edited

Loading

kml1990 commented Apr 1, 2021 •

edited

Loading

NSpencer4 commented Apr 9, 2021 •

edited

Loading

kml1990 commented Apr 9, 2021 •

edited

Loading

NSpencer4 commented Apr 13, 2021 •

edited

Loading