international-labour-organization / designsystem

A design system for the International Labour Organization
Apache License 2.0
1 stars 3 forks source link

Twig migration: Fix the failing storybook build #1137

Closed bashlk closed 3 months ago

bashlk commented 3 months ago

Currently the storybook build of the twig package is failing with the following output. It should be fixed.

> @ilo-org/twig@1.2.0 build:docs /Users/bash/Projects/nuvole/designsystem/packages/twig
> storybook build -o ./storybook-static

@storybook/cli v8.1.9

info => Cleaning outputDir: storybook-static
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info => Loading presets
info => Building manager..
WARN unable to find package.json for @ilo-org/brand-assets
info => Manager built (351 ms)
info => Building preview..
vite v5.3.1 building for production...
info => Copying static files: public at storybook-static

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 223 modules transformed.
x Build failed in 4.16s
=> Failed to build the preview
[vite:build-import-analysis] [plugin vite:build-import-analysis] src/components/tabs/tabs.twig (1:278): Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .twig file format, or if it's an asset, add "**/*.twig" to `assetsInclude` in your configuration.
file: ./src/components/tabs/tabs.twig:1:278

1: export default () => 'An error occurred whilst rendering ./src/components/tabs/tabs.twig: TypeError: Cannot read properties of undefined (reading 'includes') TypeError: Cannot read properties of undefined (reading 'includes')
                                                                                                                                                                                                                                                                                         ^
2:     at xr (/Users/bash/Projects/nuvole/designsystem/packages/maestro/lib/vite.js:6778:9)
3:     at k (/Users/bash/Projects/nuvole/designsystem/packages/maestro/lib/vite.js:6838:13)

    at getRollupError (file:///Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/rollup@4.18.1/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at error (file:///Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/rollup@4.18.1/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
    at Object.error (file:///Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/rollup@4.18.1/node_modules/rollup/dist/es/shared/node-entry.js:19558:20)
    at Object.error (file:///Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/rollup@4.18.1/node_modules/rollup/dist/es/shared/node-entry.js:18668:42)
    at Object.transform (file:///Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/vite@5.3.1/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:64865:14)
../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-dialog/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-dialog@1.1.1_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-dialog/dist/index.mjs" was ignored.
../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-presence/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-presence@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-presence/dist/index.mjs" was ignored.
../../node_modules/.pnpm/@radix-ui+react-portal@1.1.1_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-portal/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-portal@1.1.1_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-portal/dist/index.mjs" was ignored.
../../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs" was ignored.
../../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-focus-scope/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-focus-scope@1.1.0_@types+react@17.0.11_react-dom@17.0.2_react@17.0.2/node_modules/@radix-ui/react-focus-scope/dist/index.mjs" was ignored.
../../node_modules/.pnpm/@radix-ui+react-focus-guards@1.1.0_@types+react@17.0.11_react@17.0.2/node_modules/@radix-ui/react-focus-guards/dist/index.mjs (1:0): Module level directives cause errors when bundled, "use client" in "../../node_modules/.pnpm/@radix-ui+react-focus-guards@1.1.0_@types+react@17.0.11_react@17.0.2/node_modules/@radix-ui/react-focus-guards/dist/index.mjs" was ignored.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/twig@1.16.0/node_modules/twig/src/twig.loader.fs.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/Users/bash/Projects/nuvole/designsystem/node_modules/.pnpm/twig@1.16.0/node_modules/twig/src/twig.path.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
transforming (458) ../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_initCloneObject.js ELIFECYCLE  Command failed with exit code 1.
GGKapanadze commented 3 months ago

I have managed to build the storybook on node:20.11.1

Image

Image

justintemps commented 3 months ago

@bashlk and @GGKapanadze I just pulled down the latest version of the branch and the Twig Storybook built fine. Can we close this?

bashlk commented 3 months ago

So it seems like it was my bad. I was running the build command directly within the twig folder and as a result some of the upstream packages were not built.

So we can close this.