Storybook: Storybook isn't working with modular scss files

[danspratling]

Describe the bug
Using Gatbsy Themes & Typescript, i'm trying to implement a storybook build to be able to view the components, however it's falling over on the sass loaders and I can't figure out which is missing or why it's erroring, as the error isn't clear. I'm not using css modules, but the files are written and imported in a similar (but not-scoped) fashion Button/Button.scss.

To Reproduce
Steps to reproduce the behavior:
Inside a Gatsby project run yarn storybook - as i'm creating a theme in a workspace for me this is actually yarn workspace gatsby-theme storybook. This produces the following error, which is unclear that it is the scss files causing the error - i've found the issue through fairly thorough testing and debugging.

ERROR in ../node_modules/gatsby/cache-dir/gatsby-browser-entry.js 25:4
Module parse failed: Unexpected token (25:4)
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
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}
 @ ./src/components/Link/Link.tsx 10:14-31
 @ ./src/components/Link/index.tsx
 @ ./src/components/index.tsx
 @ ./src/components/Link/Button.tsx
 @ ./src/components/Link/Button.stories.tsx
 @ ./src sync .stories.tsx$
 @ ./.storybook/config.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ../node_modules/webpack-hot-middleware/client.js?reload=true

If in my component i remove the scss file import, this then works. So it is specifically the scss or css compilers causing the issue.

Expected behavior
Storybook loads without errors and includes component styles in the stories.

Code snippets
.storybook/config.js

import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ""
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
  action("NavigateTo:")(pathname)
}

configure(loadStories, module);

.storybook/webpack.config.js

const { execSync } = require('child_process')
const { dirname, join } = require('path')

module.exports = ({ config }) => {
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve('babel-loader')

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve('@babel/preset-react'),
    require.resolve('@babel/preset-env'),
  ]

  // use @babel/plugin-proposal-class-properties for class arrow functions
  config.module.rules[0].use[0].options.plugins = [
    require.resolve('@babel/plugin-proposal-class-properties'),
    //     // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    //     require.resolve('babel-plugin-remove-graphql-queries'),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ['browser', 'module', 'main']
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  })

  //Use loaders to handle scss
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          //shared variable files must be defined here, but only variables. css output will be repeated for every file
          resources: [require.resolve('../src/scss/_init.scss')],
        },
      },
      'postcss-loader',
    ],
    include: require.resolve('../'),
  })

  config.module.rules.push({
    test: /\.css$/,
    loader: 'style-loader!css-loader',
    include: __dirname,
  })

  config.resolve.extensions.push('.ts', '.tsx')

  // Copy gatsby/cache-dir/pages.json into gatsby/cache-dir/commonjs. This works
  // around an error in the gatsby module where pages.json is not found.
  const destination = join(dirname(require.resolve('gatsby')), 'pages.json')
  const source = join(dirname(dirname(destination)), 'pages.json')
  execSync(`copy ${source} ${destination}`)

  return config
}

gatsby-config.js

//Ensures the correct environment variables are used
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
        ...
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-sass-resources`, //Allows scss variables to be available across all scss files without manual imports
      options: {
        //shared variable files must be defined here, but only variables. css output will be repeated for every file
        resources: [require.resolve('./src/scss/_init.scss')],
      },
    },
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require(`autoprefixer`), //prefixes css with -webpack- and -moz- if required
          require(`postcss-inline-svg`), //inline svgs inside css - https://github.com/TrySound/postcss-inline-svg
        ],
      },
    },
    `gatsby-plugin-remove-trailing-slashes`,
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Merriweather`,
            variants: [`300`, `400`, `900`],
          },
          {
            family: `Open Sans`,
            variants: [`400`, `700`],
          },
        ],
      },
    },
  ],
}

System:

Windows 10
Node: 12.8.0
Yarn: 1.16.0
npm: 6.10.2

[gal1419]

I'm having the same issue - trying to do a simple webpack configuration to support scss modules with Typescript. I have the same configuration in another project, which works well.
For some reason, It seems like the typescript loader can't handle the scss file.

I'm getting:
ERROR in [at-loader] ./src/components/Toolbar/BigidToolbar.tsx:5:25 TS2307: Cannot find module './test.module.css'.

My configuration: https://codesandbox.io/s/reverent-hypatia-2bqxe

[tmikeschu]

I get the same error trying to use { Link } from 'gatsby' in a generic link component...

"@storybook/react": "^5.2.0-beta.39"
"gatsby": "^2.1.34"
npm 6.9.0
node 10.15.1
yarn 1.17.3

[shilman]

@tmikeschu did you follow these instructions: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/#setting-up-your-environment

[tmikeschu]

@shilman I did! I will try again with fresh eyes.

[tmikeschu]

@shilman I apologize for posting too soon. Following those instructions again from a clean branch worked for me.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[pdeka]

Why has this been closed, cause this issue seem to still exist!