https://outerbounds.com/ logo
Join Slack
Powered by
Hello all, I'm having some trouble building the d...
# ask-metaflow
a
Hello all, I'm having some trouble building the docker image here. It seems to be an erroring out when doing the 
yarn build
. I get the following error:
Copy code
#15 2.610 Creating an optimized production build...
#15 65.63 Failed to compile.
#15 65.63 
#15 65.63 /app/src/components/Announcement/index.tsx
#15 65.63 TypeScript error in /app/src/components/Announcement/index.tsx(71,6):
#15 65.63 Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & { active?: boolean | undefined; }'.  TS2559
#15 65.63 
#15 65.63     69 | 
#15 65.63     70 |   return (
#15 65.63   > 71 |     <HeightAnimatedContainer>
#15 65.63        |      ^
#15 65.63     72 |       <AnnouncementItemContainer type={item.type} open={open} last={last}>
#15 65.63     73 |         <AnnouncementIcon>
#15 65.63     74 |           <Icon name="warningThick" size="md" />
#15 65.63 
#15 65.63 
#15 65.78 error Command failed with exit code 1.
#15 65.78 info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
------
Any hints as to what could be causing this issue?
✅ 1
b
I just ran 
yarn build
myself and did not get any errors. Have you run 
yarn install
?
a
Yeah yarn install works fine locally and when building the docker image.
b
Try running
Copy code
❯ yarn lint
yarn run v1.22.19 $ eslint "./src/**/*.{ts,tsx}" ✨ Done in 7.71s.
a
I get this:
Copy code
yarn run v1.22.19
$ eslint "./src/**/*.{ts,tsx}"
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.9.5

Please only submit bug reports when using the officially supported version.

=============
✨  Done in 8.91s.
Also worth noting that I did have to use our own internal npm registry from Artifactory because our organization blocks the default registry, so the 
yarn.lock
is different. Hopefully that's not the cause of the issue.
b
I would have expected 
yarn lint
to fail for the same reasons as 
yarn build
if it was a module version issue.
Try both 
yarn tsc
and 
yarn start
to see if you get errors.
a
yarn tsc
shows 120 errors in 54 files.
Copy code
Errors  Files
     1  src/components/Announcement/index.tsx:71
     1  src/components/Breadcrumb/index.tsx:221
     1  src/components/Collapsable/__tests__/Collapsable.test.cypress.tsx:16
     3  src/components/Collapsable/index.tsx:20
     2  src/components/DAG/__tests__/DAGContent.test.cypress.tsx:198
     1  src/components/DAG/components/DAGControlBar.tsx:20
     1  src/components/DAG/index.tsx:40
     2  src/components/Form/__tests__/Checkbox.test.cypress.tsx:10
     2  src/components/Form/__tests__/DateInput.test.cypress.tsx:10
     7  src/components/Form/__tests__/Dropdown.test.cypress.tsx:15
     1  src/components/Form/Dropdown.tsx:32
     3  src/components/FullPageContainer/__tests__/FullPageContainer.test.cypress.tsx:12
     1  src/components/FullPageContainer/index.tsx:24
     2  src/components/GenericError/index.tsx:144
     1  src/components/HeightAnimatedContainer/index.tsx:9
     1  src/components/HelpMenu/TimezoneSelector.tsx:22
     1  src/components/InformationRow/index.tsx:12
     3  src/components/LogList/__tests__/LogActionBar.test.cypress.tsx:20
     7  src/components/LogList/__tests__/LogList.test.cypress.tsx:37
     4  src/components/LogList/index.tsx:104
     2  src/components/Modal/__tests__/Modal.test.cypress.tsx:9
     1  src/components/Modal/index.tsx:23
     2  src/components/Notifications/index.tsx:90
     3  src/components/Plugins/PluginGroup.tsx:42
     1  src/components/PropertyTable/index.tsx:51
     1  src/components/Tag/__tests__/Tag.test.cypress.tsx:20
     1  src/components/Tag/index.tsx:49
     6  src/components/Timeline/__tests__/TaskListLabel.test.cypress.tsx:19
     4  src/components/Timeline/Timeline.tsx:122
     2  src/components/Timeline/TimelineRow/index.tsx:76
     1  src/components/Timeline/useTaskData.ts:228
     2  src/components/Timeline/VirtualizedTimeline.tsx:110
     2  src/components/TitledRow/__tests__/TitledRow.test.cypress.tsx:24
     1  src/pages/Home/ResultGroup/index.tsx:109
     1  src/pages/Home/ResultGroup/ParametersPreview.tsx:20
     7  src/pages/Home/ResultGroup/ResultGroupCells.tsx:37
     1  src/pages/Home/ResultGroup/ResultGroupRow.tsx:108
     1  src/pages/Home/ResultGroup/StartedAtCell.tsx:47
     1  src/pages/Home/ResultGroup/StickyHeader.tsx:17
     2  src/pages/Home/ResultGroup/TimelinePreview.tsx:38
     1  src/pages/Home/Sidebar/SidebarTags.tsx:28
     1  src/pages/Home/Sidebar/SidebarTimerangeSelection.tsx:44
     1  src/pages/Run/RunHeader.tsx:112
     4  src/pages/Task/__tests__/ArtifactTable.test.cypress.tsx:10
     1  src/pages/Task/__tests__/AttemptSelector.test.cypress.tsx:11
     3  src/pages/Task/__tests__/SectionLoader.test.cypress.tsx:13
     3  src/pages/Task/components/AnchoredView.tsx:38
     3  src/pages/Task/components/ArtifactTable.tsx:69
     2  src/pages/Task/components/TaskDetails.tsx:100
     3  src/pages/Task/components/TaskList.tsx:58
     1  src/pages/Task/components/TaskSection.tsx:28
     5  src/pages/Task/index.tsx:177
     4  src/utils/debugdb.ts:18
     1  src/utils/testing.tsx:14
From `yarn start`:
b
That worked.
How about
Copy code
❯ node -v
v16.15.1
a
I'm using 
v18.11.0
locally And the docker image is nodejs14 alpine
b
Let's revisit versions -
Copy code
❯ npm ls | grep lint
├── @typescript-eslint/eslint-plugin@4.26.1
├── @typescript-eslint/parser@4.26.1
├── eslint-config-prettier@8.3.0
├── eslint-config-react-app@6.0.0
├── eslint-plugin-flowtype@5.7.2
├── eslint-plugin-import@2.23.4
├── eslint-plugin-jsx-a11y@6.4.1
├── eslint-plugin-prettier@3.4.0
├── eslint-plugin-react-hooks@4.2.0
├── eslint-plugin-react@7.24.0
a
Copy code
├── @typescript-eslint/eslint-plugin@4.33.0
├── @typescript-eslint/parser@4.33.0
├── eslint-config-prettier@8.6.0
├── eslint-config-react-app@6.0.0
├── eslint-plugin-flowtype@5.10.0
├── eslint-plugin-import@2.27.5
├── eslint-plugin-jsx-a11y@6.7.1
├── eslint-plugin-prettier@3.4.1
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react@7.32.2
b
Looks like you have more recent versions than I do, I will upgrade and see if I can match
a
Okay cool. I'm not sure why it's using more recent packages. I'm using the same 
package.json
b
I haven't updated for a while
👌 1
Copy code
❯ npm ls | grep lint
├── @typescript-eslint/eslint-plugin@4.33.0
├── @typescript-eslint/parser@4.33.0
├── eslint-config-prettier@8.6.0
├── eslint-config-react-app@6.0.0
├── eslint-plugin-flowtype@5.10.0
├── eslint-plugin-import@2.27.5
├── eslint-plugin-jsx-a11y@6.7.1
├── eslint-plugin-prettier@3.4.1
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react@7.32.2
Copy code
❯ yarn build
yarn run v1.22.19
$ cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build
Creating an optimized production build...
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.9.5

Please only submit bug reports when using the officially supported version.

=============
Failed to compile.

/Users/brendan/dev/metaflow-ui/src/App.tsx
TypeScript error in /Users/brendan/dev/metaflow-ui/src/App.tsx(43,8):
'ErrorBoundary' cannot be used as a JSX component.
  Its instance type 'ErrorBoundary' is not a valid JSX element.  TS2786

    41 |   return (
    42 |     <ThemeProvider theme={theme}>
  > 43 |       <ErrorBoundary message={t('error.application-error')}>
       |        ^
    44 |         <NotificationsProvider>
    45 |           <TimezoneProvider>
    46 |             <PluginsProvider>
Different TS error but probably same cause.
Had you deleted your 
yarn.lock
?
a
Yeah I got that one too but I fixed it by adding 
"react-error-boundary": "^3.1.4",
b
When I re-instate 
yarn.lock
and 
yarn install
again, 
yarn build
passes
a
Yes deleted the 
yarn.lock
in order to regenerate new one that points to our own internal 
npm registry
. Our VPN was blocking connectivity to https://registry.yarnpkg.com. So we are only allowed to use the internal 
npm registry
from Artifactory
b
I wonder if an easier approach would be to search and replace 
yarn.lock
with your npm registry name, keeping the version numbers intact?
a
I could give that a try. I just deleted the 
yarn.lock
file, did 
yarn config set registry <https://art-bobcat.autodesk.com/artifactory/api/npm/autodesk-npm-virtual/>
and then 
yarn install
to regenerate the new 
yarn.lock
b
Option two is to edit package.json so the semvers are exact
a
I'll try option 1 first, then option 2 next
b
Option 3 is to fix all the errors that the new linter versions are finding. That is probably something that we should eventually. Will not be an easy win.
a
Option 1 doesn't work unfortunately:
Copy code
Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.
Tried option 2. Looks like this now:
Copy code
├── @typescript-eslint/eslint-plugin@4.26.1
├── @typescript-eslint/parser@4.26.1
├── eslint-config-prettier@8.3.0
├── eslint-config-react-app@6.0.0
├── eslint-plugin-flowtype@5.7.2
├── eslint-plugin-import@2.23.4
├── eslint-plugin-jsx-a11y@6.4.1
├── eslint-plugin-prettier@3.4.0
├── eslint-plugin-react-hooks@4.2.0
├── eslint-plugin-react@7.24.0
However, still getting this error:
Copy code
Creating an optimized production build...
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.4.0

YOUR TYPESCRIPT VERSION: 4.9.5

Please only submit bug reports when using the officially supported version.

=============
Failed to compile.

/Users/hunr/PycharmProjects/metaflow-ui/src/components/Announcement/index.tsx
TypeScript error in /Users/hunr/PycharmProjects/metaflow-ui/src/components/Announcement/index.tsx(71,6):
Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & { active?: boolean | undefined; }'.  TS2559

    69 | 
    70 |   return (
  > 71 |     <HeightAnimatedContainer>
       |      ^
    72 |       <AnnouncementItemContainer type={item.type} open={open} last={last}>
    73 |         <AnnouncementIcon>
    74 |           <Icon name="warningThick" size="md" />


error Command failed with exit code 1.
b
Copy code
npm ls | grep typescript
a
Copy code
├── @typescript-eslint/eslint-plugin@4.26.1
├── @typescript-eslint/parser@4.26.1
├── typescript@4.9.5
b
You didn't change the semver for 
typescript
in 
package.json
did you?
a
No, what's it supposed to be again?
b
Mine is 
"typescript": "^4.2.3",
change yours to 
"typescript": "4.2.3",
a
Ok got it
Unfortunately, that didn't do the trick either
b
Can you change all of them? It may be React or something else
a
Yup I'm doing that right now
Changing all of them gives this new error:
Copy code
No overload matches this call.
  Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.
  Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.  TS2769

    47 |               <LoggingProvider>
    48 |                 <GlobalStyle />
  > 49 |                 <Router>
       |                  ^
    50 |                   <QueryParamProvider ReactRouterRoute={Route}>
    51 |                     {flagsReceived ? (
    52 |                       <>


error Command failed with exit code 1.
Here's my package.json
package.json
b
Copy code
❯ npm ls
metaflow-ui@1.2.4 /Users/brendan/dev/metaflow-ui
├── @cypress/react@5.12.1
├── @cypress/webpack-dev-server@1.8.0
├── @rehooks/component-size@1.0.3
├── @types/node@12.12.47
├── @types/react-dom@16.9.8
├── @types/react-router-dom@5.1.5
├── @types/react-virtualized@9.21.10
├── @types/react@16.9.41
├── @types/styled-components@5.1.9
├── @types/uuid@8.0.0
├── @typescript-eslint/eslint-plugin@4.26.1
├── @typescript-eslint/parser@4.26.1
├── concurrently@6.3.0
├── copy-to-clipboard@3.3.1
├── cross-env@7.0.3
├── cypress-wait-until@1.7.1
├── cypress@9.3.1
├── eslint-config-prettier@8.3.0
├── eslint-config-react-app@6.0.0
├── eslint-plugin-flowtype@5.7.2
├── eslint-plugin-import@2.23.4
├── eslint-plugin-jsx-a11y@6.4.1
├── eslint-plugin-prettier@3.4.0
├── eslint-plugin-react-hooks@4.2.0
├── eslint-plugin-react@7.24.0
├── fake-indexeddb@3.1.2
├── http-proxy-middleware@1.3.1
├── i18next@19.5.2
├── idb@5.0.8
├── markdown-to-jsx@7.1.2
├── mock-websocket@0.0.7
├── polished@3.6.5
├── prettier@2.3.1
├── query-string@6.13.1
├── react-custom-scrollbars-2@4.4.0
├── react-dom@16.13.1
├── react-i18next@11.15.3
├── react-router-dom@5.2.0
├── react-scripts@4.0.3
├── react-tooltip@4.2.17
├── react-virtualized@9.21.2
├── react@16.13.1
├── reconnecting-websocket@4.4.0
├── serve@12.0.1
├── spacetime@6.10.1
├── styled-components@5.3.3
├── typescript@4.2.3
├── use-debounce@5.0.0
├── use-is-in-viewport@1.0.9
├── use-query-params@1.1.6
└── uuid@8.2.0
Can you run 
npm ls
and compare against mine?
Another gotcha might be that some modules are cached. Try 
rm -Rf node_modules
then 
yarn install
a
I have wayyyy more packages listed than you for some reason.
b
What version of 
typescript
do you have?
a
Copy code
├── @typescript-eslint/eslint-plugin@4.26.1
├── @typescript-eslint/parser@4.26.1
├── typescript@4.2.3
Cleared cache, and still getting this error
b
Copy code
❯ npm ls | grep react-router-dom
├── @types/react-router-dom@5.1.5
├── react-router-dom@5.2.0
Untitled
Untitled
Since we are using yarn - ``````
a
Copy code
├── @types/react-router-dom@5.1.5
├── react-router-dom@5.2.0
export.txt
export.txt
b
I am still thinking that it is a version issue. I see some differences between your and my lists. I don't suppose that I can have access to your npm registry to be able to play with this?
a
Yeah I see some differences too. Unfortunately, it's only internal to our organization and would require VPN access
b
I didn't think so
With your 
package.json
I can recreate errors - I'll see if I can put together one that unblocks you
a
Thanks so much Brendan! I'm also looking at your yarn list file and trying to incorporate the differences.
b
Changing 
"@types/react": "16.9.0",
in 
package.json
workedforme
a
Oh wow - okay let me give it a shot.
No unfortunately that didn't work. Although the number errors is down from 100 to 40. Sigh. This is most definitely caused by our internal npm registry. :/
b
switching between the two versions gives me errors or not
do you get a different error now? Could be another @type version
a
No the same errors: The first two are -
Copy code
src/App.tsx:43:8 - error TS2786: 'ErrorBoundary' cannot be used as a JSX component.
  Its instance type 'ErrorBoundary' is not a valid JSX element.

43       <ErrorBoundary message={t('error.application-error')}>
          ~~~~~~~~~~~~~

src/App.tsx:50:39 - error TS2322: Type 'typeof Route' is not assignable to type 'FunctionComponent<{}> | ComponentClass<{}, any> | undefined'.
  Type 'typeof Route' is not assignable to type 'ComponentClass<{}, any>'.
    Types of property 'contextType' are incompatible.
      Type 'import("/Users/hunr/PycharmProjects/metaflow-ui/node_modules/@types/react-router/node_modules/@types/react/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
        Type 'import("/Users/hunr/PycharmProjects/metaflow-ui/node_modules/@types/react-router/node_modules/@types/react/index").Context<any>' is not assignable to type 'React.Context<any>'.
b
Remove the react error boundary entry
a
Yup I removed that already.
Looks like this now. Basically reset to what it was before in the github repo and just set 
"@types/react"
to 
16.9.0
package.json
b
You need to remove the `^`'s
a
For everything?
Sadly no luck even without the 
^
.
I'm thinking that I might need to get a special security exception for this particular docker file if it can't be done w/ our own internal npm registry, and hopefully they'll oblige and be ok with the off-the-shelf docker image from 
public.ecr.aws/outerbounds/metaflow_ui:latest
🙏 One thing our Security team would need to know then is if there is no interactive access permissable to the containers (eg no SSH)
b
My latest thought is that Option 3 will be the most likely to succeed. There are only 150ish errors, and most of them are similar. Trying to get the dependencies right is going to be tough as there are so many places where other modules pull in different versions. I'll take a pass at it
a
Thank you so much Brendan. I am very appreciative of your efforts here. I'll keep plugging away at this too.
Good news Brandon - I finally got it working. I followed your option 1 again, only this time I used 
yarn --frozen-lockfile
instead of 
yarn install
and that seemed to do the trick. Thanks so much for your help!
b
That's great news.
I implemented Option 3 in https://github.com/netflix/metaflow-ui/tree/refactor/types If you get a chance, I'd like you to test it out for me, and if it works, I'll incorporate those changes in the next release.
a
Hi @brave-lion-15961 - I just tested it and your changes worked! 🙂
thankyou 1
b
@acoustic-van-30942 The latest MFGUI release - https://github.com/Netflix/metaflow-ui/releases/tag/v1.2.5 - fixes the typescript errors that you got with the latest typescript linter
thankyou 1
a
Thanks very much @brave-lion-15961
7 Views
Open in Slack
PreviousNext
Powered by