Issue Linking TraceViewer packages

[hriday-panchasara]

When trying to link packages 'traceviewer-base' and 'traceviewer-react-components' from 'theia-trace-extension', the resources view throws the following error:

It could be because of a mismatch in React and React-DOM versions in theia-trace-extension and vscode-trace-extension. Another reason could be that packages were installed at a different level in the following PR: eclipse-cdt-cloud/theia-trace-extension#886

[marcdumais-work]

We believe this issue should be fixed, with the latest traceviewer-react-components, that's being built by CI right now [1]. If it's not the case, please re-open.

[1] https://github.com/eclipse-cdt-cloud/theia-trace-extension/actions/runs/6318318877/job/17157047891

[bhufmann]

The change doesn't seem to fix all the problems. I tried it with the latest traceviewer-base/traceviewer-react-components but and I get the following error:

vscode-trace-webviews:   ../vscode-trace-common/lib/server/trace-server-url-provider.js 572 bytes [built] [code generated]
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/available-views/index.tsx
vscode-trace-webviews: ./src/trace-explorer/available-views/index.tsx 7:13-37
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/available-views/index.tsx(7,14)
vscode-trace-webviews:       TS2786: 'TraceExplorerViewsWidget' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TraceExplorerViewsWidget' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/opened-traces/index.tsx
vscode-trace-webviews: ./src/trace-explorer/opened-traces/index.tsx 8:13-38
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/opened-traces/index.tsx(8,14)
vscode-trace-webviews:       TS2786: 'TraceExplorerOpenedTraces' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TraceExplorerOpenedTraces' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/properties/index.tsx
vscode-trace-webviews: ./src/trace-explorer/properties/index.tsx 13:13-36
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/properties/index.tsx(13,14)
vscode-trace-webviews:       TS2786: 'TraceExplorerProperties' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TraceExplorerProperties' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/shortcuts/index.tsx
vscode-trace-webviews: ./src/trace-explorer/shortcuts/index.tsx 8:13-36
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/shortcuts/index.tsx(8,14)
vscode-trace-webviews:       TS2786: 'ChartShortcutsComponent' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'ChartShortcutsComponent' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/time-range/index.tsx
vscode-trace-webviews: ./src/trace-explorer/time-range/index.tsx 7:13-32
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-explorer/time-range/index.tsx(7,14)
vscode-trace-webviews:       TS2786: 'TimeRangeDataWidget' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TimeRangeDataWidget' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-viewer/index.tsx
vscode-trace-webviews: ./src/trace-viewer/index.tsx 8:13-33
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-viewer/index.tsx(8,14)
vscode-trace-webviews:       TS2786: 'TraceViewerContainer' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TraceViewerContainer' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'React.ReactNode' is not assignable to type 'import("/home/user/git/theia-training/theia-trace-extension/node_modules/@types/react/ts5.0/index").ReactNode'.
vscode-trace-webviews:         Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
vscode-trace-webviews:           Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
vscode-trace-webviews: ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx
vscode-trace-webviews: ./src/trace-viewer/vscode-trace-viewer-container.tsx 465:21-42
vscode-trace-webviews: [tsl] ERROR in /home/user/git/vscode-trace-extension/vscode-trace-webviews/src/trace-viewer/vscode-trace-viewer-container.tsx(465,22)
vscode-trace-webviews:       TS2786: 'TraceContextComponent' cannot be used as a JSX component.
vscode-trace-webviews:   Its instance type 'TraceContextComponent' is not a valid JSX element.
vscode-trace-webviews:     The types returned by 'render()' are incompatible between these types.
vscode-trace-webviews:       Type 'Element' is not assignable to type 'ReactNode'.
vscode-trace-webviews:         Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
vscode-trace-webviews:  @ ./src/trace-viewer/index.tsx 3:0-67 6:32-52
vscode-trace-webviews: webpack 5.88.2 compiled with 7 errors in 8501 ms
error Command failed with exit code 1.

[williamsyang-work]

Picking this issue back up.

[williamsyang-work]

The cause of the issue: React Issue #14257 - Hooks don't work with yarn link

When we use yarn link there are two sources of react and react-dom being used. One from theia-trace-extension and one from vscode-trace-extension. This breaks hook calls. I believe the error comes from a hook call in the @mui/material package which was added in the feature that @hriday-panchasara mentioned in the description here.

I was able to fix this issue by linking the directory for react and react-dom used in theia-trace-extension to vscode-trace-extension and /node_modules/@mui/:

cd theia-trace-extension/node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link

Navigate to vscode-trace-extension...

cd vscode-trace-extension
yarn link react
yarn link react-dom
cd node_modules/@mui
yarn link react
yarn link react-dom

This stops the error from occurring while developing both repos simultaneously.

That being said, I think there are a lot of opportunities to optimize the development process of this repository :).

[williamsyang-work]

There may be other parts of the code that will throw this issue, and react + react-dom will need to be linked to those packages as well. Hopefully there is a way to configure the webpack.js or something to automatically point all react + react-dom imports to the same file.

I'll try to look into that at some point.

[marcdumais-work]

@williamsyang-work thanks for the investigation and finding this work-around. Let's keep this issue open, until we have a programmatic fix.