Gatsby Storybook configuration produces 'uncaught TypeError: $ is not a function' on Webpack

[VernerKeel]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I tried to configure Storybook on Gatsby by following this guide: [Visual Testing with Storybook guide] (https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/). When running npm run storybook I got indefinitely loading Storybook UI:

Error message on Chrome Dev Tools console: Uncaught TypeError: $ is not a function

I tried both: manual configuration and using an addon. Finally, I upgraded all related dependencies to @next.

Reproduction Link

https://github.com/vernerkeel/examples-live/tree/live/gatsby-storybook-test

Steps to Reproduce

1. npm install
2. npm run storybook

Expected Result

I expected Storybook's UI to complete loading and show stories.

Actual Result

Storybook's UI kept loading indefinitely and couldn't display stories.

Environment

System:
    OS: Windows 10 10.0.19043
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.20.6 - ~\AppData\Roaming\npm\npm.CMD
  Languages:
    Python: 3.9.7 - /c/Python39/python
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.38)
  npmPackages:
    gatsby: ^3.13.0 => 3.13.0
    gatsby-plugin-gatsby-cloud: ^3.1.0 => 3.1.0
    gatsby-plugin-image: ^1.13.0 => 1.13.0
    gatsby-plugin-manifest: ^3.13.0 => 3.13.0
    gatsby-plugin-offline: ^4.13.0 => 4.13.0
    gatsby-plugin-react-helmet: ^4.13.0 => 4.13.0
    gatsby-plugin-sharp: ^3.13.0 => 3.13.0
    gatsby-source-filesystem: ^3.13.0 => 3.13.0
    gatsby-transformer-sharp: ^3.13.0 => 3.13.0
  npmGlobalPackages:
    gatsby-cli: 3.13.0

Config Flags

No response

[fbuireu]

It seems duplicated from #32512. I'd suggest a main.js configuration such as:

module.exports = {
  // You will want to change this to wherever your Stories will live
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "webpack5",
  },
  webpackFinal: async config => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
    config.module.rules[0].exclude = [/core-js/] // new line

    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    config.module.rules[0].use[0].options.plugins.push(
      require.resolve("babel-plugin-remove-graphql-queries")
    )

    config.resolve.mainFields = ["browser", "module", "main"] // new line
    return config
  },
}