Dev UI shows popup with warnings

[instauro]

Pre-requisites

• I have double-checked my configuration
• I have tested with the :latest image tag (i.e. quay.io/argoproj/workflow-controller:latest) and can confirm the issue still exists on :latest. If not, I have explained why, in detail, in my description below.
• I have searched existing issues and could not find a match for this bug
• I'd like to contribute the fix myself (see contributing guide)

What happened/what did you expect to happen?

When launching the UI through the devcontainer a popup with warnings is displayed. The warnings are concerning two external libraries, autolinker and argo-ui. Autolinker is missing source maps and argo-ui is not importing things correctly.

Expected behavior would be to not have a popup with warnings

Version

latest

Paste a small workflow that reproduces the issue. We must be able to run the workflow; don't enter a workflows that uses private images.

make start UI=true

Logs from the workflow controller

Contents of the popup displayed to the user

Compiled with problems:
×
WARNING in ./node_modules/argo-ui/src/components/index.ts 4:0-66
export 'PageContextProps' (reexported as 'PageContextProps') was not found in './page/page' (possible exports: Page, PageContext)
WARNING in ./node_modules/argo-ui/src/components/index.ts 7:0-76
export 'DropDownMenuProps' (reexported as 'DropDownMenuProps') was not found in './dropdown-menu' (possible exports: DropDownMenu)
WARNING in ./node_modules/argo-ui/src/components/index.ts 7:0-76
export 'MenuItem' (reexported as 'MenuItem') was not found in './dropdown-menu' (possible exports: DropDownMenu)
WARNING in ./node_modules/argo-ui/src/components/index.ts 9:0-71
export 'TopBarProps' (reexported as 'TopBarProps') was not found in './top-bar/top-bar' (possible exports: TopBar)
WARNING in ./node_modules/argo-ui/src/components/index.ts 9:0-71
export 'Toolbar' (reexported as 'Toolbar') was not found in './top-bar/top-bar' (possible exports: TopBar)
WARNING in ./node_modules/argo-ui/src/components/index.ts 9:0-71
export 'TopBarFilter' (reexported as 'TopBarFilter') was not found in './top-bar/top-bar' (possible exports: TopBar)
WARNING in ./node_modules/argo-ui/src/components/index.ts 10:0-40
export 'Tab' (reexported as 'Tab') was not found in './tabs/tabs' (possible exports: Tabs)
WARNING in ./node_modules/argo-ui/src/components/index.ts 18:0-68
export 'SelectOption' (reexported as 'SelectOption') was not found in './select/select' (possible exports: Select)
WARNING in ./node_modules/argo-ui/src/components/index.ts 18:0-68
export 'SelectProps' (reexported as 'SelectProps') was not found in './select/select' (possible exports: Select)
WARNING in ./node_modules/autolinker/dist/es2015/anchor-tag-builder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/anchor-tag-builder.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/anchor-tag-builder.ts'
WARNING in ./node_modules/autolinker/dist/es2015/autolinker.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/autolinker.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/autolinker.ts'
WARNING in ./node_modules/autolinker/dist/es2015/html-tag.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/html-tag.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/html-tag.ts'
WARNING in ./node_modules/autolinker/dist/es2015/htmlParser/parse-html.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/htmlParser/parse-html.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/htmlParser/parse-html.ts'
WARNING in ./node_modules/autolinker/dist/es2015/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/index.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/email-match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/email-match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/email-match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/hashtag-match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/hashtag-match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/hashtag-match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/index.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/index.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/mention-match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/mention-match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/mention-match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/phone-match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/phone-match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/phone-match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/match/url-match.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/url-match.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/match/url-match.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/email-matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/email-matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/email-matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/hashtag-matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/hashtag-matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/hashtag-matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/index.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/index.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/mention-matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/mention-matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/mention-matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/phone-matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/phone-matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/phone-matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/tld-regex.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/tld-regex.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/tld-regex.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/url-match-validator.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/url-match-validator.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/url-match-validator.ts'
WARNING in ./node_modules/autolinker/dist/es2015/matcher/url-matcher.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/url-matcher.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/matcher/url-matcher.ts'
WARNING in ./node_modules/autolinker/dist/es2015/regex-lib.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/regex-lib.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/regex-lib.ts'
WARNING in ./node_modules/autolinker/dist/es2015/truncate/truncate-end.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-end.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-end.ts'
WARNING in ./node_modules/autolinker/dist/es2015/truncate/truncate-middle.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-middle.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-middle.ts'
WARNING in ./node_modules/autolinker/dist/es2015/truncate/truncate-smart.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-smart.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/truncate/truncate-smart.ts'
WARNING in ./node_modules/autolinker/dist/es2015/utils.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/utils.ts'
WARNING in ./node_modules/autolinker/dist/es2015/version.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/version.ts' file: Error: ENOENT: no such file or directory, open '/home/vscode/go/src/github.com/argoproj/argo-workflows/ui/node_modules/autolinker/src/version.ts'

Logs from in your workflow's wait container

N/A

[agilgur5]

The warnings are concerning two external libraries, autolinker and argo-ui.

Yea they're both warnings you can ignore. There's also SCSS warnings on deprecated syntax in the Foundation UI library. All of them are from deps so we can't really fix them.

I didn't want to add an ignore in the webpack config though as they can become errors and so we should be mindful of them, particularly when doing dep upgrades or changing config. For instance, #12516 (comment) has a test error due to this. #12516 also removes the autolinker dep.

argo-ui is not importing things correctly.

Yea IIRC it was written before the import type syntax existed and is on an older version of TS, Webpack, etc.
It also exports raw TS, which is why the error occurs downstream in this codebase, and why I haven't been able to upgrade Workflows' TS version or make Workflows' tsconfig more strict 😕 The new JSR's auto-compilation looks potentially useful for that portion of the problem

argo-ui is effectively deprecated and barely maintained (I'm the only person who really checks it, but I can't merge my own PRs) unfortunately; see also argoproj/argo-ui#453

(For reference, I've been an active contributor for about a year now, so much of this history predates me)

[agilgur5]

argoproj/argo-ui#509 unblocked argoproj/argo-ui#552 which unblocked #12516 and now the popup warnings have been resolved plus several others (install warnings and console warnings have been reduced as well)!