Problem building a storybook

zakzelman commented 1 month ago

Hello, I have a problem when trying to run chpokify on my local machine. As I realized after the test run of the frontend, I need to run storybook as well, because without it I get errors in the browser when I click the "Register" button, here is an example.

Error 1 -thee

font-family: ${({ theme }) => theme.fontFamily?.[0] || 'sans-serif'};

If I try to use a stub on this line, such as this one, I just get another error and this happend time after time. That's when I came to the conclusion that the reason lies in the storybook, but I can't build it either.

I've tried fixing various errors, but that doesn't get me anywhere. Example: After installing all dependencies using the yarn install command, I try to run the yarn storybook:build command suggested in the package.json file

Output: 70% building 138/167 modules 29 active ...lib/index.js??ref--4-0!/home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/themeProvider/index.jsERR! => Failed to build the preview ERR! Module not found: Error: Can't resolve './storeProvider' in '/home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators' ERR! ModuleNotFoundError: Module not found: Error: Can't resolve './storeProvider' in '/home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators' ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compilation.js:925:10 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:401:22 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:130:21 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:224:22 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/neo-async/async.js:2830:7 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/neo-async/async.js:6877:13 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:214:25 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:213:14 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43 ERR! ModuleNotFoundError: Module not found: Error: Can't resolve './storeProvider' in '/home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators' ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compilation.js:925:10 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:401:22 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:130:21 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:224:22 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/neo-async/async.js:2830:7 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/neo-async/async.js:6877:13 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModuleFactory.js:214:25 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:213:14 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7 ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5 ERR! at eval (eval at create (/home/zakzelman/test-chpokify/chpokify/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1) ERR! at /home/zakzelman/test-chpokify/chpokify/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43 ERR! resolve './storeProvider' in '/home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators' ERR! using description file: /home/zakzelman/test-chpokify/chpokify/frontend/package.json (relative path: ./.storybook/decorators) ERR! Field 'browser' doesn't contain a valid alias configuration ERR! using description file: /home/zakzelman/test-chpokify/chpokify/frontend/package.json (relative path: ./.storybook/decorators/storeProvider) ERR! no extension ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider doesn't exist ERR! .mjs ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.mjs doesn't exist ERR! .js ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.js doesn't exist ERR! .jsx ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.jsx doesn't exist ERR! .ts ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.ts doesn't exist ERR! .tsx ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.tsx doesn't exist ERR! .json ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.json doesn't exist ERR! .cjs ERR! Field 'browser' doesn't contain a valid alias configuration ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider.cjs doesn't exist ERR! as directory ERR! /home/zakzelman/test-chpokify/chpokify/frontend/.storybook/decorators/storeProvider doesn't exist error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed. Exit code: 1

After investigating this error I came to the conclusion that decorators on the path: /frontend/.storybook/decorators such as storeProvider, routerProvider, centered simply do not exist on this path, they are simply not there. So trying to build something doesn't get me anywhere. I have never encountered storybook before and can only assume that maybe something is generated independently or I am missing something, but this is certainly not the only error. Please help me to solve this problem. Thank you very much.

aichelnokov commented 3 weeks ago

@zakzelman I have same problem with application, that run in container (by run docker compose up).

@vborodulin Поковырял репозиторий, нашел неточности в указании некоторых переменных в docker-compose.yml для nginx, поправил:

      - COUNTRY_CODE=RU
      - COUNTRY_NAME=Russia

Все начало собираться. Но заметил что chpokify-frontend вообще отсутсвует.

Я добавил секцию frontend после server и до nginx:

  frontend:
    container_name: chpokify-frontend
    depends_on:
      - mongodb
      - redis
      - migrations
    build:
      context: .
      dockerfile: ./frontend/Dockerfile
    env_file:
      - .env
    volumes:
      - api-schemas_node_modules:/home/packages/api-schemas/node_modules
      - ./packages/api-schemas:/home/packages/api-schemas
      - models-types_node_modules:/home/packages/models-types/node_modules
      - ./packages/models-types:/home/packages/models-types
      - helpers_node_modules:/home/packages/helpers/node_modules
      - ./packages/helpers:/home/packages/helpers
      - routing_node_modules:/home/packages/routing/node_modules
      - ./packages/routing:/home/packages/routing
      - i18n_node_modules:/home/packages/i18n/node_modules
      - ./packages/i18n:/home/packages/i18n
      - frontend_node_modules:/home/frontend/node_modules
      - ./frontend/:/home/frontend/
      - ./scripts/:/home/scripts/

А так-же добавил frontend_node_modules: в секцию volumes.

Когда я запускаю сборку docker compose up --build -d на этапе установки зависимостей для фронта валится ошибка о несовместимости react-native и версии ноды (хотя для образ node:16-alpine3.11):

172.1 error react-native@0.75.1: The engine "node" is incompatible with this module. Expected version ">=18". Got "16.13.0"
172.2 error Found incompatible module.
172.2 info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn install" did not complete successfully: exit code: 1

На 18-й ноде, просто запуская фронт (из корня через yarn install && yarn client:dev) получаю такую-же ошибку, что и у @zakzelman , причем проверил что тема в ThemeProvider пробрасывается.

aichelnokov commented 3 weeks ago

@zakzelman i've solved the problem, that comes from error with auth by AppleID:

Set following code at frontend/components/domains/auth/buttons/AppleAuthBtn/index.tsx:136

    if (!isLoading && window.AppleID && clientId?.length) {

vborodulin / chpokify

Problem building a storybook #3