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

[dpouliot]

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(R) Core(TM) 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

[shilman]

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

[dpouliot]

Yes. Follow on note... I deleted my node_modules folder, and reinstalled (rc.1 this time). Same error.

[ron23]

Same issue here

[ndelangen]

Can someone help me reproduce this issue on my local machine? A repo that shows this issue would really help get this fixed.

I can also help you @dpouliot get the storybook repo setup so you can fix this? Happy to take a meeting request:
https://calendly.com/ndelangen/storybook

[dpouliot]

@ndelangen
https://drive.google.com/file/d/10oD9Z2Tt0zGhMqvAw6bPxE04YqIXxiSN/view?usp=sharing
Let me know once you've got it, I'd like to take it down.
Storybook 5 will build successfully. Storybook 6 won't.

[ron23]

I realized my issue was a bit different.
I have babelrc file with the following plugin:

["transform-rename-import", { "original": "^(.+?)\\.scss$", "replacement": "$1.css" }]

I got errors saying the files couldn't find the *.css file (probably because babel already transformed it to use .css).
This wasn't happening before on 5.2 or 5.3.

[ndelangen]

@shilman didn't you do some recent changes to babel config loading?

[shilman]

Yeah, but AFAIK only related to processing .mdx files.

• Before: The MDX handler was including user babel config
• After: The MDX handler only includes Storybook configuration by default and users need to override the babelrc/babelConfig: false if they want a custom babel configuration. I expect most users won't want to do this ever.

The change shouldn't affect any other file types in the project.

[ndelangen]

ok, so it's not that then. thanks.

[ndelangen]

@dpouliot got it

[ndelangen]

I investigated:

The webpack extend mode is no longer supported in Storybook V6.
The best course of action is to migrate to the main.js config file format introduced in 5.3:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to-mainjs-configuration

Once you've done that migrating to SB6 should be easier.

To get sass support in SB6 we actually have an example here:
https://storybook.js.org/docs/configurations/custom-webpack-config/#examples

[ndelangen]

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]

Please re-open if this doesn't fix it, and you find storybook is not compatible with sass-loader in some way.

[dpouliot]

@ndelangen Thank you, this basically fixed it. There are other issues, but I'll follow up on those through the appropriate channels.

[amcdnl]

@ndelangen - I'm having this issue w/ the CRA default setup. Have you ran into this there?

[rohanvachheta]

@amcdnl having same issue , can anyone please help me with that ,thanks