storybook error - TypeError: this.getOptions is not a function

[saitodisse]

Hi! Nice boilerplate.

I've installed sass-loader because it's was not in package.json

I'm having this issue now

❯ nx storybook shared-components                                                                                                                      09:30:28

> nx run shared-components:storybook 
info => Loading presets
info => Loading 1 config file in "/home/saito/_git/nx-nextjs/libs/shared/components/.storybook"
info => Adding stories defined in "/home/saito/_git/nx-nextjs/libs/shared/components/.storybook/main.js"
info => Using implicit CSS loaders
info => Using custom postcss.config.js
info => Loading custom Webpack config (full-control mode).
(node:13228) DeprecationWarning: Relying on the implicit PostCSS loader is deprecated and will be removed in Storybook 7.0.
If you need PostCSS, include '@storybook/addon-postcss' in your '.storybook/main.js' file.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wdm｣: wait until bundle finished: 
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
webpack built preview 9ed69ff30581538046eb in 12562ms
✖ ｢wdm｣: Hash: 9ed69ff30581538046eb
Version: webpack 4.46.0
Time: 12562ms
Built at: 02/06/2021 09:30:45
                            Asset      Size        Chunks                          Chunk Names
                      iframe.html  4.34 KiB                [emitted]               
            main.iframe.bundle.js    46 KiB          main  [emitted]               main
        main.iframe.bundle.js.map  19.5 KiB          main  [emitted] [dev]         main
    runtime~main.iframe.bundle.js  33.5 KiB  runtime~main  [emitted]               runtime~main
runtime~main.iframe.bundle.js.map  34.7 KiB  runtime~main  [emitted] [dev]         runtime~main
    vendors~main.iframe.bundle.js  2.67 MiB  vendors~main  [emitted]        [big]  vendors~main
vendors~main.iframe.bundle.js.map  2.59 MiB  vendors~main  [emitted] [dev]         vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true 88 bytes {main} [built]
[./libs/shared/components/.storybook/generated-stories-entry.js] 412 bytes {main} [built]
[./libs/shared/components/.storybook/preview.js] 234 bytes {main} [built]
[./libs/shared/components/.storybook/preview.js-generated-config-entry.js] 3.46 KiB {main} [built]
[./libs/shared/components/.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./libs/shared/components/src/lib sync recursive ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$] ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$ 244 bytes {main} [built]
[./libs/shared/components/src/lib sync recursive ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$] ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$ 160 bytes {main} [built]
[./node_modules/@storybook/client-api/dist/esm/index.js] 933 bytes [built]
[./node_modules/@storybook/client-logger/dist/esm/index.js] 4.25 KiB {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/index.js] 236 bytes {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 489 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=true] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true 7.68 KiB {vendors~main} [built]
    + 685 hidden modules

ERROR in ./libs/shared/assets/styles/fonts.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/assets/styles/fonts.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
 @ ./libs/shared/assets/styles/fonts.scss 2:26-200 53:4-74:5 56:18-192
 @ ./libs/shared/components/.storybook/preview.js
 @ ./libs/shared/components/.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true

ERROR in ./libs/shared/assets/styles/tailwind.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/assets/styles/tailwind.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
 @ ./libs/shared/assets/styles/tailwind.scss 2:26-203 53:4-74:5 56:18-195
 @ ./libs/shared/components/.storybook/preview.js
 @ ./libs/shared/components/.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true

ERROR in ./libs/shared/components/src/lib/target-blank-link/index.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/components/src/lib/target-blank-link/index.module.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
 @ ./libs/shared/components/src/lib/target-blank-link/index.module.scss 2:26-225 53:4-74:5 56:18-217
 @ ./libs/shared/components/src/lib/target-blank-link/index.tsx
 @ ./libs/shared/components/src/lib/target-blank-link/index.stories.tsx
 @ ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./libs/shared/components/.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true

ERROR in ./libs/shared/components/src/lib/shared-components/index.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/components/src/lib/shared-components/index.module.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
 @ ./libs/shared/components/src/lib/shared-components/index.module.scss 2:26-225 53:4-74:5 56:18-217
 @ ./libs/shared/components/src/lib/shared-components/index.tsx
 @ ./libs/shared/components/src/lib/shared-components/index.stories.tsx
 @ ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./libs/shared/components/.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.22 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.97 KiB {HtmlWebpackPlugin_0} [built]

———————————————————————————————————————————————

>  NX   ERROR  Running target "shared-components:storybook" failed

  Failed tasks:

  - shared-components:storybook

[erkobridee]

@saitodisse just to keep you posted, I saw your comment here, as soon I have any time I'll look into it

thanks for the feedback o/

[erkobridee]

@saitodisse weird I ran the current config of the project and I didn't get the same issue as you... did you removed the package-lock.json file before install the node dependencies? maybe that get some newest lib version that caused the current issue...

[erkobridee]

@saitodisse I had updated the nx, next.js and tailwindcss version on the project, deleted the node_modules, package-lock.json, reinstall again (npm i`) and I'm still not able to get the same issue that you got #11

may I ask you to take a new look at the updates?

[saitodisse]

Everything is working fine now after your update. I'm testing with yarn. Nice work!