Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'this.getOptions is not a function': Adding Scss in Gatsby/Typescript

See original GitHub issue

Describe the bug Running a script to start storybook results in an error when checking SCSS file and mentions this.getOptions is not a function.

To Reproduce

  1. Installed @storybook/preset-css (Storybook ran successfully prior to install)
  2. Added @storybook/preset-css to .storybook/main.js addon option
  3. Changed a css file to scss
  4. When importing scss file to component at the same file level… import './AtomButton.scss';

Expected behavior Work as expected based on basic usage from preset-css README

Code snippets In terminal:

> start-storybook -p 6006

info @storybook/react v6.1.21
info
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/storyshot
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/storyshot
info => Loading 1 config file in "./.storybook"
info => Loading 9 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Using default Webpack setup
info => Using cached manager
webpack built 9afe68f3358446302f6c in 15702ms
× ｢wdm｣: Hash: 9afe68f3358446302f6c
Version: webpack 4.46.0
Time: 15702ms
Built at: 03/04/2021 9:02:46 PM
                                          Asset      Size        Chunks                                Chunk Names
                                    iframe.html  4.38 KiB                [emitted]
            main.9afe68f3358446302f6c.bundle.js  37.2 KiB          main  [emitted] [immutable]         main
        main.9afe68f3358446302f6c.bundle.js.map  13.6 KiB          main  [emitted] [dev]               main
    runtime~main.9afe68f3358446302f6c.bundle.js  33.5 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.9afe68f3358446302f6c.bundle.js.map  34.7 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.9afe68f3358446302f6c.bundle.js  7.72 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.9afe68f3358446302f6c.bundle.js.map  7.91 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.9afe68f3358446302f6c.bundle.js runtime~main.9afe68f3358446302f6c.bundle.js.map vendors~main.9afe68f3358446302f6c.bundle.js vendors~main.9afe68f3358446302f6c.bundle.js.map main.9afe68f3358446302f6c.bundle.js main.9afe68f3358446302f6c.bundle.js.map
[0] multi ./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 ./node_modules/@storybook/addon-a11y/dist/a11yRunner.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yHighlight.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 196 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 435 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 2.53 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./node_modules/@storybook/addon-a11y/dist/a11yHighlight.js-generated-other-entry.js] 2.56 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-a11y/dist/a11yRunner.js-generated-other-entry.js] 2.56 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.57 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.57 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js] 2.58 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js] 2.58 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.57 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js] 2.57 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.57 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
    + 1584 hidden modules

ERROR in ./src/components/atoms/AtomButton/AtomButton.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/atoms/AtomButton/AtomButton.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\tyler\Documents\Sites\nick-karr-music\node_modules\sass-loader\dist\index.js:25:24)
 @ ./src/components/atoms/AtomButton/AtomButton.scss 2:12-151 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
 @ ./src/components/atoms/AtomButton/index.tsx
 @ ./src/components/atoms/AtomButton/AtomButton.stories.tsx
 @ ./src/components sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.tsx)$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./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 ./node_modules/@storybook/addon-a11y/dist/a11yRunner.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yHighlight.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entr
./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.2 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2 KiB {HtmlWebpackPlugin_0} [built]
[built]

In .stories/main.js:

module.exports = {
  stories: [
    '../src/components/**/*.stories.js',
    '../src/components/**/*.stories.tsx',
  ],
  addons: [
    '@storybook/addon-links/register',
    '@storybook/addon-essentials/register',
    '@storybook/addon-cssresources/register',
    '@storybook/addon-a11y/register',
    '@storybook/storyshot/register',
    '@storybook/preset-scss',
  ],
  webpackFinal: async (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'),
    ];

    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      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'];

    // Configuring TypeScript support
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
        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'),
        ],
      },
    });

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

    return config;
  },
};

In gatsby.config.js:

module.exports = {
  siteMetadata: {
    title: 'Nick Karr Music Site',
  },
  plugins: [
    'gatsby-plugin-sass',
    'gatsby-plugin-sharp',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/images/icon.png',
      },
    },
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: './src/images/',
      },
      __key: 'images',
    },
    'gatsby-plugin-typescript',
    'gatsby-plugin-layout',
  ],
};

System

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz 
  Binaries:
    Node: 14.15.1 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
  npmPackages:
    @storybook/addon-a11y: ^6.1.21 => 6.1.21
    @storybook/addon-actions: ^6.1.21 => 6.1.21
    @storybook/addon-cssresources: ^6.1.21 => 6.1.21
    @storybook/addon-essentials: ^6.1.21 => 6.1.21
    @storybook/addon-links: ^6.1.21 => 6.1.21
    @storybook/addon-storyshots: ^6.1.21 => 6.1.21
    @storybook/addon-viewport: ^6.1.21 => 6.1.21
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/react: ^6.1.21 => 6.1.21

Additional context My end goal is to run SCSS with CSS Modules. I would like to know what other issues I would need to consider if the above issue can be resolved.

Thank you!

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
ozaytsev86commented, Mar 23, 2021

@ozaytsev86 you can use webpack5 in storybook 6.2

https://storybook.js.org/blog/storybook-for-webpack-5/

Just tried it last weekend, all works like a charm with sass-loader v11 and postcss-loader v5. Thank you @shilman

3reactions
shilmancommented, Mar 15, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Type Error: this.getOptions is not a function For style-loader
In doing so, I encountered my first error. It was the same error, but for sass-loader . This Stack Overflow thread helped me...
Read more >
gatsby-plugin-scss-typescript
I'm not seeing any files being created? Make sure your file are suffixed with .module.scss , the plugin won't generate declarations for regular...
Read more >
mini-css-extract-plugin - npm
Start using mini-css-extract-plugin in your project by running `npm i ... TypeScript icon, indicating that this package has built-in type ...
Read more >
Import SVG Components in Storybook - Duncan Leung
Storybook Not Importing SVGs I was running into an issue where SVG imports in Storybook were instead of being imported as React components…...
Read more >
FAQ - Eufemia - DNB Design System
css-loader v5.2.7. We get else this error: Type Error: this.getOptions is not a function for style-loader. #gatsby- ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Storybook 6.2.0-beta new angular renderer ovverides properties

Next page

CSS in header.css causes incorrect rendering of component