pocka / storybook-addon-turbo-build

Storybook Addon to improve build performance
MIT License
49 stars 3 forks source link

Build breaks in Docker node:14 container #18

Closed morewings closed 2 years ago

morewings commented 2 years ago

Description of the bug

I tried to use this plugin with GitLab CI with official node:14 Docker image (https://hub.docker.com/_/node/) Build breaks with the following error

$ node --max-old-space-size=4096 $(yarn bin)/build-storybook -c .storybook -o static -s public
internal/modules/cjs/loader.js:905
  throw err;
  ^
Error: Cannot find module '/builds/olxeu/pwa/shared/olx-ui-library/node_modules/.bin/build-storybook'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
error Command failed with exit code 1.

How to reproduce the bug?

To reproduce, run this configuration inside node:14 docker

const path = require('path');

module.exports = {
    webpackFinal: (config) => {
        config.resolve.alias = {
            ...config.resolve.alias,
            "@": path.resolve(__dirname, "../src/"),
        };
        return config;
    },
    stories: [
        "../src/**/*.stories.mdx",
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    addons: [
        '@storybook/addon-essentials',
        '@storybook/addon-knobs',
        '@storybook/addon-links',
        '@storybook/addon-a11y',
        'storybook-addon-themes',
        {
            name: "storybook-addon-turbo-build",
            options: {
                optimizationLevel: 1,
            },
        },
    ]
};

Expected behaviour

It should build.

Optimization level

1

Addon version

1.0.1

Storybook version

6.3.8

Additional contexts

No response

pocka commented 2 years ago

@morewings Does the command work if you comment out the addon?

From seeing the stack trace, I think the error just complains about the absence of the build-storybook script file. Missing yarn install in a build pipeline and Adding a --production flag to the install command often causes this error.

morewings commented 2 years ago

@pocka It works without this plugin (believe me, I've spent a lot of time fixing our pipeline). Also works with this plugin locally on macOS. I think it's something about Docker image specifics.

morewings commented 2 years ago

@pocka here is our build file. node_modules folder is created at setup-environment step.

image: node:14
cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
        - .yarn/
        - .npmrc
        - node_modules/
        - static/
variables:
    GIT_DEPTH: "1000"

stages:
    - setup
    - build
    - test library
    - deploy
    - release

# Set up registry to publish and get dependencies
setup-environment:
    stage: setup
    script:
        - rm -rf .npmrc
        - yarn install --cache-folder .yarn
    only:
        - merge_requests
        - master
        - alpha
        - beta

# Runs after merge to build a Storybook assets. Needed only for AWS deploy
build-storybook:
    stage: build
    artifacts:
        paths:
            - static/
    script:
        - yarn run s:build
    only:
        - master
        - merge_requests
pocka commented 2 years ago

Cannot reproduce with node:14 Docker image. (examples/basic directory at d788ffdf405390cd0c704c1a9790fa35dfb0d1d8) Please provide a repro repo.

Commands and outputs ``` % uname -r 4.19.0-19-amd64 % docker run -it -v `pwd`:/app "node:14" /bin/sh # cd /app # cd examples/basic # ls README.md benchmark.json node_modules package.json scripts stories yarn.lock # node -v v14.19.0 # yarn -v 1.22.17 # yarn build-storybook yarn run v1.22.17 $ build-storybook info @storybook/react v6.4.9 info info => Cleaning outputDir: /app/examples/basic/storybook-static undefined info => Loading presets info => Compiling manager.. info => Compiling preview.. info => Using implicit CSS loaders info => Using default Webpack4 setup 10% building 1/1 modules 0 active(node:50) 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) 49% building 333/358 modules 25 active /app/examples/basic/node_modules/lodash/pick.jsBrowserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating 92% chunk asset optimization esbuild-minifyinfo => Manager built (25 s) info => Preview built (26 s) WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). WARN This can impact web performance. WARN Assets: WARN vendors~main.72bda127.iframe.bundle.js (1.61 MiB) WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. WARN Entrypoints: WARN main (1.64 MiB) WARN runtime~main.7fec03d4.iframe.bundle.js WARN vendors~main.72bda127.iframe.bundle.js WARN main.a0b4fae7.iframe.bundle.js WARN info => Output directory: /app/examples/basic/storybook-static Done in 36.33s. ```