Gatsby v4 Typescript and Storybook 6.5.6 with Webpack 5 throws `ModuleParseError: Module parse failed: Unexpected token`

haysclark commented 2 years ago

Versions

storybook-addon-gatsby: v0.0.5
node: v14.17.6 (npm v6.14.15)

Reproduction

Created simple sample project based off gatsby-starter-ts.

git clone git@github.com:haysclark/gatsby-starter-ts-storybook.git

Install with yarn or npm (yarn.lock included in project)

cd gatsby-starter-ts-storybook

yarn install
# or
npx yarn install

Storybook and Webpack 5 support was added via npx sb init --builder webpack5in the following commit

Steps to reproduce

Run npm run storybook from within the project directory.

Note: You can comment out the line that calls Gatsby's navigate method to verify the Component works sans-Gatsby use.

What is expected?

Storybook should start normally.

What is actually happening?

Storybook/Webpack throws the following error:

npm run storybook

> gatsby-starter-ts@1.0.0 storybook /Users/hays/haysclark/gatsby-starter-ts-storybook
> start-storybook -p 6006

info @storybook/react v6.5.6
info 
info => Loading presets
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
99% done plugins webpack-hot-middlewarewebpack built preview c34e39ce86bd989114c9 in 8913ms
ModuleParseError: Module parse failed: Unexpected token (26:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}
    at handleParseError (/Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/lib/NormalModule.js:976:19)
    at /Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at /Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at /Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/lib/NormalModule.js:834:15
    at Array.eval (eval at create (/Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/hays/haysclark/gatsby-starter-ts-storybook/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)

haysclark commented 2 years ago

As a work-around, one can use the manual steps mentioned on the Gatsby website.

https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#manual-configuration

traviswimer commented 2 years ago

I'm seeing the same problem. It seems the issue has to do with Gatsby not being included in webpack transforms.

Based on the manual steps in the link @haysclark posted, I was able to fix the error by keeping the add-on and just adding the webpack exclude part to my .storybook/main.js:

webpackFinal: async (config) => {
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
    return config;
},

This line is also included in storybook-addon-gatsby here, but for some reason it doesn't seem to be applying.

Without really looking into it, here are my thoughts:

Maybe this exclude is being overridden elsewhere.
This line depends on typeof config.module?.rules?.[0] === "object" being true. Maybe this is returning false for some reason and this line never runs.

byronlanehill commented 2 years ago

This is due to a new gatsby package, gatsby-scripts being required by gatsby v4.15 and having untraspiled es6 code as well. Had the same issue with jest, and changing this exclude pattern to node_modules/(?!(gatsby|gatsby-script)/) solved my issue there. Testing now to see if that solves the problem for this package.

Edit: my assumption may have been incorrect. It doesn't appear that changing the pattern had any effect on this bug.

feibyte commented 2 years ago

I have this problem and this workaround works.

webpackFinal: async (config) => {
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
  return config;
},

After looking into this problem, It seems this addon is not loaded at all. I tried to add some loggers into the source code under node_modules, but nothing is logged. Eventually, I found out if I remove ./preview part in package.json, it works magically.

"exports": {
  ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs"
  },
  "./preview": {
      "require": "./dist/preview.cjs",
      "import": "./dist/preview.mjs"
  },
  "./package.json": "./package.json"
  },

@angeloashmore Could you pls verify it and release a patch version?

prismicio-community / storybook-addon-gatsby