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

mattveraldi commented 3 years ago

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 commented 3 years ago

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

Did you manage to make any progress finding a solution?

SGoldenGraham commented 3 years ago

I am also running into this running Angular 11 & Tailwindcss

kintz09 commented 3 years ago

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 commented 3 years ago

I have the same problem. Any help would be appreciated

skworden commented 3 years ago

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 commented 3 years ago

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.

I've added following import to preview.js import '!style-loader!css-loader!sass-loader!../src/styles/styles.scss';
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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

will-tonic commented 2 years ago

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

Radamanthys0 commented 2 years ago

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.

storybookjs / presets