storybook: [Storybook 6.0.0-rc.0] build fails on sass-loader

Describe the bug I’m testing upgrading my storybook 5.3 repo to 6. I haven’t changed the webpack.config.js, but Storybook fails on build with:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "../../../assets/mixins";

Code snippets

const path = require("path");
const webpack = require('webpack');
const config = require('../package.json');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../"),
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(ttf|eot|png|svg|gif|ico|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader?name=[name].[ext]',
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(config.version),
    }),
  ],
};

System: Environment Info:

System: OS: macOS Mojave 10.14.6 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Binaries: Node: 10.21.0 - /usr/local/bin/node Yarn: 1.18.0 - /usr/local/Cellar/yarn/1.22.4/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 83.0.4103.116 Edge: 81.0.416.77 Firefox: 76.0.1 Safari: 13.1.1 npmPackages: @storybook/addon-a11y: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-actions: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-backgrounds: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-docs: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-knobs: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-links: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-notes: 6.0.0-rc.0 => 6.0.0-alpha.6 @storybook/addon-options: 6.0.0-rc.0 => 6.0.0-alpha.29 @storybook/addon-storyshots: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-storysource: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addon-viewport: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/addons: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/react: 6.0.0-rc.0 => 6.0.0-rc.0 @storybook/source-loader: 6.0.0-rc.0 => 6.0.0-rc.0

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 23 (11 by maintainers)

Most upvoted comments

Previously you could do:

// webpack.config.js 
const path = require("path");
const webpack = require('webpack');
const config = require('../package.json');

module.exports = {
  // ...
};

That’s no longer supported, this is the new way:

// .storybook/main.js
const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

@ndelangen

SassError: expected "{".
  ╷
1 │ import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                         ^
  ╵
  src/index.scss 1:89  root stylesheet
    at processResult (/Users/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:700:19)
    at /node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:806:5
    at /Users/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /node_modules/sass-loader/dist/index.js:54:7
    at Function.call$2 (/node_modules/sass/sass.dart.js:93041:16)
    at _render_closure.call$0 (/node_modules/sass/sass.dart.js:81441:23)
    at Object.Primitives_applyFunction (/node_modules/sass/sass.dart.js:1124:30)
    at Object.Function_apply (/node_modules/sass/sass.dart.js:5894:16)
    at _callDartFunctionFast (/node_modules/sass/sass.dart.js:7596:16)
    at /node_modules/sass/sass.dart.js:7574:18
SassError: SassError: expected "{".

I’m facing the same issue. Any leads?

+14

disguised-uchiha on Jun 2, 2021

Previously you could do:

// webpack.config.js 
const path = require("path");
const webpack = require('webpack');
const config = require('../package.json');

module.exports = {
  // ...
};

That’s no longer supported, this is the new way:

// .storybook/main.js
const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

@ndelangen

SassError: expected "{".
  ╷
1 │ import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                         ^
  ╵
  src/index.scss 1:89  root stylesheet
    at processResult (/Users/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:700:19)
    at /node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:806:5
    at /Users/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /node_modules/sass-loader/dist/index.js:54:7
    at Function.call$2 (/node_modules/sass/sass.dart.js:93041:16)
    at _render_closure.call$0 (/node_modules/sass/sass.dart.js:81441:23)
    at Object.Primitives_applyFunction (/node_modules/sass/sass.dart.js:1124:30)
    at Object.Function_apply (/node_modules/sass/sass.dart.js:5894:16)
    at _callDartFunctionFast (/node_modules/sass/sass.dart.js:7596:16)
    at /node_modules/sass/sass.dart.js:7574:18
SassError: SassError: expected "{".

productdevbook on May 21, 2021

So to confirm, this config was working fine in 5.3 and is now failing in 6.0?

shilman on Jul 8, 2020

Previously you could do:

// webpack.config.js 
const path = require("path");
const webpack = require('webpack');
const config = require('../package.json');

module.exports = {
  // ...
};

That’s no longer supported, this is the new way:

// .storybook/main.js
const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

ndelangen on Jul 21, 2020