React Storybook deploy fails during Webpack build

backpackless · August 25, 2019, 6:35pm

Hey everyone

I’m trying to deploy my React Storybook (project here: moon-dust) to Netlify but I’m running into issues during the webpack build phase (custom webpack config here: moon-dust/.storybook/webpack.config.js).

The builds always seems to stall out at around 67-69% (when building components from react-feather, not sure if that’s relevant), and I get “Build script returned non-zero exit code: 1”.

The weird thing is deploying this Storybook used to work just fine. The only thing that changed when it started to break was importing SVGs as React components. Here’s an example of an offending line: import { ReactComponent as BackDisplay } from '../../assets/logo.svg';. This actually gave me a Typescript “module not found” error during one ill-fated Netlify deploy, but I never saw it again lol, now I just get the 67% stall outs.

Anyway, here’s the last section of the deploy output before it just stops cold; oh, and the npm run build-storybook command works fine locally:

1:51:40 PM: <s> [webpack.Progress] 66% building 747/790 modules 43 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 66% building 748/790 modules 42 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 66% building 749/790 modules 41 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 66% building 750/790 modules 40 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 67% building 751/790 modules 39 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 67% building 752/790 modules 38 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-up.js

1:51:40 PM: <s> [webpack.Progress] 67% building 752/791 modules 39 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-down.js

1:51:40 PM: <s> [webpack.Progress] 67% building 753/791 modules 38 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-down.js

1:51:40 PM: <s> [webpack.Progress] 67% building 754/791 modules 37 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-down.js

1:51:40 PM: <s> [webpack.Progress] 67% building 755/791 modules 36 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-left-down.js

1:51:40 PM: <s> [webpack.Progress] 67% building 755/792 modules 37 active /opt/build/repo/capsules/moon-dust/node_modules/es-abstract/es2018.js

1:51:40 PM: <s> [webpack.Progress] 67% building 755/793 modules 38 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 756/793 modules 37 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 757/793 modules 36 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 758/793 modules 35 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 759/793 modules 34 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 760/793 modules 33 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 761/793 modules 32 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 762/793 modules 31 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 763/793 modules 30 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 764/793 modules 29 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-right.js

1:51:40 PM: <s> [webpack.Progress] 67% building 764/794 modules 30 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-left.js

1:51:40 PM: <s> [webpack.Progress] 67% building 765/794 modules 29 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-left.js

1:51:40 PM: <s> [webpack.Progress] 67% building 766/794 modules 28 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/corner-down-left.js

1:51:40 PM: <s> [webpack.Progress] 67% building 766/795 modules 29 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/copy.js

1:51:40 PM: <s> [webpack.Progress] 67% building 766/796 modules 30 active /opt/build/repo/capsules/moon-dust/node_modules/lodash/_arrayMap.js

1:51:40 PM: <s> [webpack.Progress] 67% building 767/796 modules 29 active /opt/build/repo/capsules/moon-dust/node_modules/lodash/_arrayMap.js

1:51:40 PM: <s> [webpack.Progress] 67% building 768/796 modules 28 active /opt/build/repo/capsules/moon-dust/node_modules/lodash/_arrayMap.js

1:51:40 PM: <s> [webpack.Progress] 67% building 769/796 modules 27 active /opt/build/repo/capsules/moon-dust/node_modules/lodash/_arrayMap.js

1:51:40 PM: <s> [webpack.Progress] 67% building 769/797 modules 28 active /opt/build/repo/capsules/moon-dust/node_modules/lodash/memoize.js

1:51:40 PM: <s> [webpack.Progress] 67% building 769/798 modules 29 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/compass.js

1:51:40 PM: <s> [webpack.Progress] 67% building 770/798 modules 28 active /opt/build/repo/capsules/moon-dust/node_modules/react-feather/dist/icons/compass.js

fool · August 27, 2019, 5:55pm

Hi @backpackless - could you try turning off the verbose mode in storybook/webpack to see if that allows more useful logs to be shown before your build aborts? you’d specifically want to remove the --progress flag to webpack if you call it directly, and add --quiet flag to storybook if that’s what you call instead.

I think that will expose the actual failure logs for you but let me know if not!

backpackless · August 27, 2019, 9:52pm

Thanks @fool, that did expose the actual failure! Here it is:

10:14:21 PM: ERR! TypeScript error in /opt/build/repo/capsules/moon-dust/src/components/PlayingCard/CardBack/CardBack.stories.tsx(3,47):
10:14:21 PM: ERR! Cannot find module '../../../assets/logo.svg'.  TS2307
10:14:21 PM: ERR!
10:14:21 PM: ERR!     1 | import { storiesOf } from '@storybook/react';
10:14:21 PM: ERR!     2 | import React from 'react';
10:14:21 PM: ERR!   > 3 | import { ReactComponent as BackDisplay } from '../../../assets/logo.svg';
10:14:21 PM: ERR!       |                                               ^
10:14:21 PM: ERR!     4 | import CardBack from './CardBack';
10:14:21 PM: ERR!     5 |
10:14:21 PM: ERR!     6 | storiesOf('CardBack', module).add('Default', () => <CardBack display={BackDisplay} />);
10:14:21 PM: ERR!
10:14:21 PM:  /opt/build/repo/capsules/moon-dust/src/components/PlayingCard/PlayingCard.tsx
10:14:21 PM: ERR! TypeScript error in /opt/build/repo/capsules/moon-dust/src/components/PlayingCard/PlayingCard.tsx(5,47):
10:14:21 PM: ERR! Cannot find module '../../assets/logo.svg'.  TS2307
10:14:21 PM: ERR!
10:14:21 PM: ERR!
10:14:21 PM:      3 | import styled from 'styled-components/macro';
10:14:21 PM: ERR!     4 | import tw from 'tailwind.macro';
10:14:21 PM: ERR!   > 5 | import { ReactComponent as BackDisplay } from '../../assets/logo.svg'; // TODO: Make card back art configurable
10:14:21 PM: ERR!       |                                               ^
10:14:21 PM: ERR!     6 | import CardBack from './CardBack/CardBack';
10:14:21 PM: ERR!     7 | import CardFace from './CardFace/CardFace';
10:14:21 PM: ERR!
10:14:21 PM:      8 |
10:14:21 PM: ERR!

For some reason importing an SVG as a React component isn’t working on Netlify but is working locally. I’m pretty sure the import { ReactComponent as Icon } from './icon.svg' is part of the Create React App webpack setup, but I’m not sure why this feature wouldn’t carry over to the deploy.

backpackless · August 28, 2019, 11:23pm

Finally figured this out after about 12 failed deploys.

The solution was to add a type file for SVGs (i.e. svg.d.ts).

Content of the file is as follows:

declare module '*.svg' {
  import React from 'react';
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

Source: https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent/54122142

Why this is needed for Netlify when it’s not for a local storybook build/server is still a mystery

fool · August 29, 2019, 7:05pm

Glad to hear you found a workaround!

I suspect the answer to your last question is that we don’t use the same versions or tools as you to build. I bet if you sync them up, your build and our build behave identically:

Devhound · January 27, 2020, 8:31pm

Netlify doesn’t listen to the command options passed. On my local machine the logs are quiet and don’t show webpack progress but in netlify ci server they show up.

luke · January 28, 2020, 6:35pm

Hi, @Devhound, and welcome to the Netlify community site. Would you please send us a link to a deploy where the options passed are not being used during the site build?

andrelandgraf · July 24, 2020, 5:40am

Hey luke,

I am not entirely sure if the issues are connected. I got similar issues trying to deploy storybook to Netlify.

The storybook deploy documentation advises to use --quiet in case the build process fails. Maybe that’s what Devhound was talking about?

My build command looks like this: "build-storybook": "NODE_ENV=production build-storybook -s -p --quiet"

There is also an issue at the storybook repository about it.

luke · July 29, 2020, 7:25am

Hi, @andrelandgraf, we’re happy to troubleshoot if there are questions about a specific site. Do you have a site affected by this?

andrelandgraf · August 6, 2020, 4:49am

Hi @luke,

That would be very nice. I googled quite a bit about this issue and wasn’t able to find something specific.

The site: Netlify App
One example for a failed build: Netlify App
The GitHub repo: GitHub - andrelandgraf/gatsby-x: Hello World. I <3 Gatsby! This is my Gatsby skeleton. There is a lot of tooling and pluggin' around Gatsby and I am tired of doing it from scratch for every new project.

perry · August 7, 2020, 5:58pm

hey @andrelandgraf, just as a FYI luke is on PTO this week and won’t be back for a few days. I will make sure he sees this and can take a look when he comes back.

luke · August 10, 2020, 9:40am

Hi, @andrelandgraf, I see the following error in the most recent build logs:

5:33:19 PM: ERR! => Failed to build the preview
5:33:19 PM: ERR! Module not found: Error: Can't resolve '../../../public/static/d/3649515864.json' in '/opt/build/repo/src/components/layout'
(node:1330) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve '../../../public/static/d/3649515864.json' in '/opt/build/repo/src/components/layout'
    at /opt/build/repo/node_modules/webpack/lib/Compilation.js:925:10
5:33:19 PM:     at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:401:22
5:33:19 PM:     at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:130:21
5:33:19 PM:     at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:224:22
5:33:19 PM:     at /opt/build/repo/node_modules/neo-async/async.js:2830:7
5:33:19 PM:     at /opt/build/repo/node_modules/neo-async/async.js:6877:13
5:33:19 PM:     at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:214:25
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/Resolver.js:213:14
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/Resolver.js:285:5
5:33:19 PM:     at eval (eval at create (/opt/build/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/Resolver.js:285:5
5:33:19 PM:     at eval (eval at create (/opt/build/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/Resolver.js:285:5
5:33:19 PM:     at eval (eval at create (/opt/build/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
5:33:19 PM:     at /opt/build/repo/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
5:33:19 PM: (node:1330) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
5:33:19 PM: (node:1330) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I also get this same error when I attempt to clone and build the repository on my local system. You’ll need to resolve this error to get the build working locally first. Once that is working, we can troubleshoot the build at Netlify. Issues which are not caused by Netlify are not covered in the scope of our support.

Someone else here on the community site may be able to troubleshoot the custom code but our support team doesn’t do this.

Please let us know if there are questions about this reply or if there are questions about what our support team will and will not troubleshoot.

andrelandgraf · August 10, 2020, 6:37pm

Hi Luke,

Thanks for your support. Hope you had a good PTO!

Thanks for the feedback. If I run npm run build-storybook locally, it works. That’s why I thought it’s only failing on Netlify. Since, it’s also not working locally for you, I will further investigate on my end. Thanks, again!

Best,
Andre

luke · August 11, 2020, 8:11am

Hi, @andrelandgraf, I’m adding more detail in hopes this helps. Please note your local working directory might have changes or files which are not in the repo.

To simulate a build at Netlify, it helps when testing to clone the repo to an empty directory. Then do the dependency install and build in that newly cloned copy of the repo. This is a great way to build similarly to how our build system will build (and reduces the possibility of something local being different).

This is what I get locally after cloning, npm install , and npm run build-storybook :

$ npm run build-storybook

> gatsby-x@1.0.0 build-storybook /Users/luke/tmp/gatsby-x
> NODE_ENV=production build-storybook -s -p --quiet

info @storybook/react v5.3.19
info
info clean outputDir..
cp: no such file or directory: -p/!(index.html)
info => Copying static files from: -p
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (6.15 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
info => Compiling preview..
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '../../../public/static/d/3649515864.json' in '/Users/luke/tmp/gatsby-x/src/components/layout'
(node:10929) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve '../../../public/static/d/3649515864.json' in '/Users/luke/tmp/gatsby-x/src/components/layout'
    at factory.create (/Users/luke/tmp/gatsby-x/node_modules/webpack/lib/Compilation.js:925:10)
    at factory (/Users/luke/tmp/gatsby-x/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
    at resolver (/Users/luke/tmp/gatsby-x/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/luke/tmp/gatsby-x/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/luke/tmp/gatsby-x/node_modules/neo-async/async.js:2830:7
    at /Users/luke/tmp/gatsby-x/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (/Users/luke/tmp/gatsby-x/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/Resolver.js:213:14)
    at hook.callAsync (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/Users/luke/tmp/gatsby-x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7)
    at hook.callAsync (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/Users/luke/tmp/gatsby-x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/Users/luke/tmp/gatsby-x/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/Users/luke/tmp/gatsby-x/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
(node:10929) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10929) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-x@1.0.0 build-storybook: `NODE_ENV=production build-storybook -s -p --quiet`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-x@1.0.0 build-storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/luke/.npm/_logs/2020-08-11T01_40_26_534Z-debug.log

Again, this is why I’m saying the issue is independent of our service. I did this on my local Macbook and get the same error as our build system. The error happens even without using Netlify.

Now, if you cannot reproduce the same error in freshly clone copy of the repo, there could be other issues. For example, I did confirm I was using the same Node.js version as the build did at Netlify (and we both get the same error) but maybe your local system is using a different version of node.

If you track down the root cause, please feel free to follow-up here with the solution. Likewise, if the fresh clone works for you locally, please let us know and we’ll see what other differences could account for this.

andrelandgraf · August 22, 2020, 3:05am

Hey Luke,

Short follow-up with the solution. npm run build-storybook worked locally for me since I have built gatsby before locally and therefore my public folder got created by gatsby build. On Netlify, gatsby build never run and therefore the files in public were missing. I removed all stories files that tried to render react components that include GraphQL queries that try to query the json files from the public folder. That was a quick fix for me with no real downsides. I guess there are also better fixes.

It was not an error with Netlify, just my local folder had side effects due to gatsby build. Thank you again for your support.

Storybook is now up and running: https://design-system.andre-landgraf.cool/

Best,
Andre

perry · August 24, 2020, 6:39pm

thank you for sharing