Issue with the addon and latest version of Gatsby

[jonniebigodes]

Following up on an issue that surfaced on the Storybook repo, it seems that there's an issue with the latest version of Gatsby, Storybook, and the addon itself. More specifically when a user installs the addon and tries to run Storybook it will break with the following message:

Uncaught TypeError: $ is not a function
    at Object../node_modules/core-js/modules/es.global-this.js (es.global-this.js:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/core-js/internals/global.js (get-substitution.js:44:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/core-js/internals/export.js (export.js:1:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/core-js/modules/es.array.for-each.js (es.array.for-each.js:2:1)

I've checked and it seems that some changes are required to allow the addon to work properly. If you take a look at my response to the issue, in there are the necessary steps to allow the addon to work properly.

Let me know once you've addressed this issue so that we can close this down, or continue to work on it until we find a suitable solution.

Have a great weekend.

Stay safe

[angeloashmore]

Hi @jonniebigodes, thanks for the detailed triaging. Unfortunately, I'm not seeing the same error, even when running the reproduction repository (https://github.com/alfredoperez/gatsby-storybook-error).

Was there anything special you did to reproduce the issue?

These are the steps I took:

gh repo clone alfredoperez/gatsby-storybook-error
cd gatsby-storybook-error
npm i
npm run storybook

Upon opening Storybook, the default stories run. There are no core-js errors in the console.

---

I also created a new Gatsby project, installed Storybook with the addon, and also did not run into an issue.

npm init gatsby
cd test-project
npx sb init
npm install @storybook/builder-webpack5 @storybook/manager-webpack5 webpack@5 --save-dev

The .storybook/main.js file looks like this (it's just the default main.js with the addon included:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  core: {
    builder: "webpack5",
  },
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-gatsby",
  ],
  framework: "@storybook/react",
};

Thanks! Hope you're staying safe as well. :)

[unimprobable]

Hello @angeloashmore I just tried your minimal reproduction steps where you start a new Gatsby project and install Storybook, and noticed that there is no step listed where you add "storybook-addon-gatsby" to your package. I see it is in the .storybook/main.js file. Since I was following your steps, I didn't add it via npm/yarn either and Storybook ran with the defaults, albeit with an error in VSCode's console.

After I actually installed the addon, the initial problem does show up, where the error in the browser states "Uncaught TypeError: $ is not a function..."

Do you have any insights on why this is happening? I'd love to get Storybook running on my Gatsby projects. Thanks!

[mosesoak]

Just wanted to report a similar error for the record, also fixed by the above patch (this is not the complete trace, for brevity)

info => Loading presets
WARN   Failed to load preset: {"type":"presets"} on level 1
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
ERR!     at new NodeError (node:internal/errors:371:5)
ERR!     at validateString (node:internal/validators:120:11)
ERR!     at Module.require (node:internal/modules/cjs/loader:998:3)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
...
ERR!     at getPresets (/project-path/node_modules/@storybook/core-common/dist/cjs/presets.js:313:23)
ERR!     at loadAllPresets (/project-path/node_modules/@storybook/core-common/dist/cjs/presets.js:365:10) {
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }