Project setup fails with module build error

[surajyadav1108]

followed the setup guide for the setup of argo-ui with given steps

• yarn install
• yarn start
yarn start failed with

[Error message "error:0308010C:digital envelope `routines::unsupported](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)

using export NODE_OPTIONS=--openssl-legacy-provider worked to start the build and server but on server module build fails with

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:14:21)

[agilgur5]

Yes you'll need to use the version of Node specified in the .nvmrc.

This repo is on an older/EoL version of Node (v14) and the OpenSSL error in later versions of Node is due to an incompatibility in Storybook v6/Webpack v4 (which is also outdated). I'm attempting to fix that in #432 (comment) etc but right now you should use the version of Node specified in the repo.

Also I'm not sure what work you were trying to do here, but this repo is no longer actively maintained, hence some issues like this will crop up. See #453 for more details.

[agilgur5]

Welp, I reproduced the second error as well after updating Node and adding NODE_OPTIONS=--openssl-legacy-provider to all the Storybook scripts.

This seems to be because we're using Storybook v6 w/ Webpack v4, but dependabot erroneously updated typescript-loader from v8 to v9 in #227. And ts-loader v9 requires Webpack v5, hence the old, incompatible APIs.

I think CI didn't fail on #227's build b/c CI only checks yarn build and not yarn start. In yarn build, this error pops up as a warning and it still has exit code 0:

❯ yarn build
yarn run v1.22.19
$ NODE_OPTIONS='--openssl-legacy-provider' build-storybook -o ./dist/storybook
info @storybook/react v6.3.8
info 
info => Cleaning outputDir: <folder-name-here>/argo-ui/dist/storybook
(node:51313) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
(node:51313) DeprecationWarning: Configuration files such as "config", "presets" and "addons" are deprecated and will be removed in Storybook 7.0.
Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#to-mainjs-configuration
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "<folder-name-here>/argo-ui/.storybook"
info => Using implicit CSS loaders
info => Loading custom Webpack config (full-control mode).
10% building 1/1 modules 0 active(node:51313) 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.
info => Preview built (14 s)
WARN ./stories/index.stories.tsx
WARN Module build failed (from ./node_modules/ts-loader/index.js):
WARN TypeError: loaderContext.getOptions is not a function
WARN     at getLoaderOptions (<folder-name-here>/argo-ui/node_modules/ts-loader/dist/index.js:91:41)
WARN     at Object.loader (<folder-name-here>/argo-ui/node_modules/ts-loader/dist/index.js:14:21)
WARN  @ ./stories sync .stories.tsx$ ./index.stories.tsx
WARN  @ ./.storybook/config.js
WARN  @ ./.storybook/config.js-generated-config-entry.js
WARN  @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/config.js-generated-config-entry.js
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.b13ba453.iframe.bundle.js (1 MiB)
WARN   assets/fonts/fa-solid-900.ttf (388 KiB)
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.01 MiB)
WARN       runtime~main.bf4428eb.iframe.bundle.js
WARN       vendors~main.b13ba453.iframe.bundle.js
WARN       main.1bb962b8.iframe.bundle.js
WARN 
WARN webpack performance recommendations: 
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Manager built (15 s)
info => Output directory: <folder-name-here>/argo-ui/dist/storybook
✨  Done in 17.98s.

[surajyadav1108]

Yes you'll need to use the version of Node specified in the .nvmrc.

This repo is on an older/EoL version of Node (v14) and the OpenSSL error in later versions of Node is due to an incompatibility in Storybook v6/Webpack v4 (which is also outdated). I'm attempting to fix that in #432 (comment) etc but right now you should use the version of Node specified in the repo.

Also I'm not sure what work you were trying to do here, but this repo is no longer actively maintained, hence some issues like this will crop up. See #453 for more details.

thanks for Clearing up the issue. I was trying to work on a issue related to UI argoCD-flickering wanted to check how the Autocomplete component is working which could be the reason behind the Unstable UI