I have a docker-compose to run a storybook container with this dockerfile:
FROM node:14-stretch-slim as frontend-builder
WORKDIR /app/frontend
COPY ./frontend/package.json .
COPY ./frontend/yarn.lock .
ENV PATH ./node_modules/.bin/:$PATH
COPY ./frontend .
RUN yarn install
RUN npx -p @storybook/cli sb init
RUN yarn storybook
I have this error when I run the command yarn storybook :
[8/8] RUN yarn storybook 154.3s
=> => # as directory
=> => # /app/frontend/src/stories/Page doesn't exist
=> => # WARN Broken build, fix the error above.
=> => # WARN You may need to refresh the browser.
=> => # info => Loading presets
=> => # ? Would you like to send crash reports to Storybook? › (Y/n)
So I ve tried to remove this command and run all the preceding commands (including RUN npx -p @storybook/cli sb init) and when i go into the built image I have these files in app/frontend/src/stories:
# ls
Button.stories.tsx Header.tsx Page.tsx button.css page.css
Button.tsx Introduction.stories.mdx TagWidget.stories.js header.css
Header.stories.tsx Page.stories.tsx assets mockUtils.js
So I dont understand why yarn storybook command is throwing me the error Page doesnt exist...
Note when i run yarn storybook-build i get an error saying Button was not found in the same directory :
#12 148.5 ERR! ModuleNotFoundError: Module not found: Error: Can't resolve './Button' in '/app/frontend/src/stories'
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compilation.js:925:10
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:401:22
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:130:21
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:224:22
#12 148.5 ERR! at /app/frontend/node_modules/neo-async/async.js:2830:7
#12 148.5 ERR! at /app/frontend/node_modules/neo-async/async.js:6877:13
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:214:25
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:213:14
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
#12 148.5 ERR! ModuleNotFoundError: Module not found: Error: Can't resolve './Button' in '/app/frontend/src/stories'
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compilation.js:925:10
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:401:22
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:130:21
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:224:22
#12 148.5 ERR! at /app/frontend/node_modules/neo-async/async.js:2830:7
#12 148.5 ERR! at /app/frontend/node_modules/neo-async/async.js:6877:13
#12 148.5 ERR! at /app/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:214:25
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:213:14
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
#12 148.5 ERR! at eval (eval at create (/app/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
#12 148.5 ERR! at /app/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
#12 148.5 ERR! resolve './Button' in '/app/frontend/src/stories'
#12 148.5 ERR! using description file: /app/frontend/package.json (relative path: ./src/stories)
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! using description file: /app/frontend/package.json (relative path: ./src/stories/Button)
#12 148.5 ERR! no extension
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button doesn't exist
#12 148.5 ERR! .web.mjs
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.web.mjs doesn't exist
#12 148.5 ERR! .mjs
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.mjs doesn't exist
#12 148.5 ERR! .web.js
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.web.js doesn't exist
#12 148.5 ERR! .js
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.js doesn't exist
#12 148.5 ERR! .json
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.json doesn't exist
#12 148.5 ERR! .web.jsx
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.5 ERR! /app/frontend/src/stories/Button.web.jsx doesn't exist
#12 148.5 ERR! .jsx
#12 148.5 ERR! Field 'browser' doesn't contain a valid alias configuration
#12 148.6 ERR! /app/frontend/src/stories/Button.jsx doesn't exist
#12 148.6 ERR! as directory
#12 148.6 ERR! /app/frontend/src/stories/Button doesn't exist
#12 148.6 info => Loading presets
#12 148.9 error Command failed with exit code 1.
#12 148.9 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The answer is simple: each RUN command adds a new layer to the docker container and the preceding layer is not necessarily accessible to the next RUN command. As such you need to run yarn storybook in command: yarn storybook in the docker-compose.yml