storybook: Storybook 6.3.12 build-storybook fails ERR! EEXIST: file already exists, mkdir '/storybook-static/favicon.ico'

Describe the bug A clear and concise description of what the bug is.

To Reproduce Running Angular 10 and Storybook 6.3.12 with Webpack4 build. Whenever I try and run build-storybook, the build fails (updated my personal directories with “…”):

build-storybook

info @storybook/angular v6.3.12 info info => Cleaning outputDir: /…/storybook-static info => Loading presets ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/ ERR! @storybook/addon-actions info => Compiling manager… info => Compiling preview… info => Loading 1 config file in “/…/.storybook” info => Loading 3 other files in “/…/.storybook” WARN Expected ‘@storybook/addon-docs’ to be listed before ‘@storybook/addon-controls’ (or ‘@storybook/addon-essentials’). Check your main.js? WARN If addon-docs or addon-essentials is included by another addon/preset you can safely ignore this warning. WARN WARN https://github.com/storybookjs/storybook/issues/11442 info => Adding stories defined in “/…/.storybook/main.js” info => Found custom tsconfig.json Warning: Entry point ‘@auth0/angular-jwt’ contains deep imports into ‘/…/node_modules/rxjs/internal/Observable’. This is probably not a problem, but may cause the compilation of entry points to be out of order. Warning: Entry point ‘@w11k/angular-sticky-things’ contains deep imports into ‘/…/node_modules/rxjs/internal/scheduler/animationFrame’. This is probably not a problem, but may cause the compilation of entry points to be out of order. Warning: Entry point ‘angular2-text-mask’ contains deep imports into ‘/…/node_modules/text-mask-core/dist/textMaskCore’. This is probably not a problem, but may cause the compilation of entry points to be out of order. info => Using implicit CSS loaders info => Loading angular-cli config info => Using angular project “LicensingManager:build” for configuring Storybook info => Using angular-cli webpack config info => Using default Webpack4 setup Starting type checking service… 10% building 1/1 modules 0 active(node:15793) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to ‘@storybook/addon-postcss’, you will need to add your own plugins, such as ‘postcss-flexbugs-fixes’ and ‘autoprefixer’.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details. (Use node --trace-deprecation ... to show where the warning was created) 92% chunk asset optimization TerserPlugininfo => Manager built (18 s) 95% emitting fork-ts-checker-webpack-pluginERR! => Failed to build the preview ERR! EEXIST: file already exists, mkdir ‘/…/storybook-static/favicon.ico’ ERR! Error: EEXIST: file already exists, mkdir ‘/…/storybook-static/favicon.ico’ ERR! [Error: EEXIST: file already exists, mkdir ‘/…/storybook-static/favicon.ico’] { ERR! errno: -17, ERR! code: ‘EEXIST’, ERR! syscall: ‘mkdir’, ERR! path: ‘/…/storybook-static/favicon.ico’ ERR! } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! licensing-manager@0.0.0 build-storybook: build-storybook npm ERR! Exit status 1

System “@angular/cli”: “^10.2.3”, “@angular/compiler-cli”: “^10.2.5”, “@angular/language-service”: “^10.2.5”, “@storybook/addon-backgrounds”: “^6.3.12”, “@storybook/addon-controls”: “^6.3.12”, “@storybook/addon-info”: “^5.3.21”, “@storybook/addon-knobs”: “^6.3.1”, “@storybook/addon-viewport”: “^6.3.12”, “@storybook/angular”: “^6.3.12”,

Additional context I did try setting core builder to Webpack5 but that caused other issues.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 28 (14 by maintainers)

Commits related to this issue

test(core-server): add reproduction for #16732 — committed to storybookjs/storybook by deleted user 2 years ago
fix(core-server): await staticDirs fs.copy properly Using forEach with await in the callback does not work. Changing it to a for-of loop handles the async staticDirs copy task correctly without creat... — committed to storybookjs/storybook by deleted user 2 years ago
fix(core-server): await staticDirs fs.copy properly Using forEach with await in the callback does not work. Changing it to a for-of loop handles the async staticDirs copy task correctly without creat... — committed to storybookjs/storybook by deleted user 2 years ago
test(core-server): add reproduction for #16732 — committed to storybookjs/storybook by deleted user 2 years ago
fix(core-server): await staticDirs fs.copy properly Using forEach with await in the callback does not work. Changing it to a for-of loop handles the async staticDirs copy task correctly without creat... — committed to storybookjs/storybook by deleted user 2 years ago

Most upvoted comments

@shilman Are there any plans on releasing this fix for v6?? I’m facing the same problem on Storybook v6.5.12 and am thinking about how I can fix this 🤔 The directory names can’t be renamed because it’s used in production. Thanks in advance!

kenfdev on Oct 6, 2022

I tried to use the latest version of fs-extra without success.

The error gets thrown here in fs-extra copy https://github.com/jprichardson/node-fs-extra/blob/9.1.0/lib/copy/copy.js#L154

If I set recursive: true in the mkdir call, it works.

function mkDirAndCopy (srcMode, src, dest, opts, cb) {
  fs.mkdir(dest, { recursive: true }, err => {
    if (err) return cb(err)
    copyDir(src, dest, opts, err => {
      if (err) return cb(err)
      return setDestMode(dest, srcMode, cb)
    })
  })
}

Workaround

Use https://gist.github.com/kroeder/e4ac67f73d7fc03c8355c168518824ce and put it into <root>/patches/fs-extra+9.1.0.patch
Add npx patch-package as a postinstall step (https://www.npmjs.com/package/patch-package)

This should do the trick for now 🤞

kroeder on Aug 30, 2022

same or similar problem

info => Cleaning outputDir: /_work/2/s/dist/storybook
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.
info => Copying static files: /_work/2/s/libs/common/src at /_work/2/s/dist/storybook/
info => Copying static files: /_work/2/s/libs/desktop/src at /_work/2/s/dist/storybook/
info => Copying static files: /_work/2/s/libs/basiskomponenten/src at /_work/2/s/dist/storybook/
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/_work/2/s/.storybook/tsconfig.json"
info => Using angular project "user-app:build" for configuring Storybook
info => Loading custom manager config
(node:31178) UnhandledPromiseRejectionWarning: Error: EEXIST: file already exists, mkdir '/_work/2/s/dist/storybook/translations'

I think the problem is that each of my static files sources contains the folder translations. After copying the first source, the second fails because the directory already exists. I think there should be a check and if directory already exists it should be used as target and not tried to recreate it

admir86 on Dec 20, 2021

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.33 containing PR #19064 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

shilman on Sep 13, 2022

Found a workaround for my issue, don’t know what changed with node 16, but we were copying a static asset folder during the build (with the option in the storybook config), which was also (apparently) included in the angular buildstep. Removing it from storybook config fixed the issue for me, the problem might actually be coming from angular rather than storybook.

iMarv on Apr 23, 2022