Uncaught TypeError: $ is not a function

Describe the bug I’ve setup a fresh Gatsby V3 environment, and installed Storybook onto it. I followed the relevant Gatsby docs to get Storybook working with Gatsby. After running npm run storybook, I’m getting an infinite load when accessing ‘localhost:6006’, and a console error stating ‘Uncaught TypeError: $ is not a function’.

To Reproduce Install the dependencies listed below, and add the code to the corresponding config files for Storybook. Run npm run storybook.

package.json:

{
  "name": "storybook",
  "version": "1.0.0",
  "private": true,
  "description": "storybook",
  "author": "",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "gatsby": "^3.11.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/builder-webpack5": "^6.3.7",
    "@storybook/manager-webpack5": "^6.3.7",
    "@storybook/react": "^6.3.7",
    "babel-loader": "^8.2.2"
  }
}

.storybook/main.js:

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)\/)/]
    // 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")
    )
    return config
  },
}

.storybook/preview.js:

import { action } from "@storybook/addon-actions"

// Gatsby's Link overrides:
// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
// so Gatsby Link doesn't throw errors.
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
}
// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
global.__BASE_PATH__ = "/"

// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions

window.___navigate = pathname => {
  action("NavigateTo:")(pathname)
}

System Environment Info: System: OS: Windows 10 10.0.19041 CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics Binaries: Node: 14.17.1 - C:\Program Files\nodejs\node.EXE
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.67) npmPackages: @storybook/addon-actions: ^6.3.7 => 6.3.7 @storybook/addon-essentials: ^6.3.7 => 6.3.7 @storybook/addon-links: ^6.3.7 => 6.3.7 @storybook/builder-webpack5: ^6.3.7 => 6.3.7 @storybook/manager-webpack5: ^6.3.7 => 6.3.7 @storybook/react: ^6.3.7 => 6.3.7

Additional context

[rifqirosyidi]

Hi i’ve also encounter this on windows however i fixed it by adding this line on main.js

config.module.rules[0].exclude = [/core-js/]

and

config.resolve.mainFields = ["browser", "module", "main"]

so the main.js would be

module.exports = {
  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/]

    // 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"]
    return config
  },
}

hope it helps

[South-Paw]

I have a branch with a repo with a reproduction of the issue here and here

Only difference between this and @alex-major-digital’s report above is that I used storybook-addon-gatsby instead of manual installation

Unsure if relevant; my CLI shows the following (last line is most significant, Storybook loads and then goes back into waiting for the bundle):

Error in browser console is:

Uncaught TypeError: $ is not a function
    at Object../node_modules/core-js/modules/es.global-this.js (vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-9cb66e.iframe.bundle.js:55416)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28)
    at fn (runtime~main.iframe.bundle.js:308)
    at Object../node_modules/core-js/internals/global.js (vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-9cb66e.iframe.bundle.js:49925)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28)
    at fn (runtime~main.iframe.bundle.js:308)
    at Object../node_modules/core-js/internals/export.js (vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-9cb66e.iframe.bundle.js:49428)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28)
    at fn (runtime~main.iframe.bundle.js:308)
    at Object../node_modules/core-js/modules/es.array.for-each.js (vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-9cb66e.iframe.bundle.js:54312)