React Storybook deploy fails during Webpack build

Hey everyone :wave:

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

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!

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.

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 :man_shrugging:

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: