Custom Component Example "BubbleMessage" works half-way

[joelwiesmann]

I tried to implement an own custom component. I followed the detailed instructions given in custom-components.md which worked well. The custom component did show up (render) in the frontend development mode (npm run custom.dev). I was able to place the component on the page and edit settings.

I then transpiled the code to the style.css and templates.umd.js and copied the two files into an app/extensions-subdirectory as described in the documentation.

After starting the app in edit mode, the new component could be drag & dropped onto the page. However it was not rendered. I see in the hierarchy-view the component and I can set it's fields, but it's not "displaying".

In browser debug mode I get this error message:
TypeError: Cannot read properties of undefined (reading 'text')

[Killian604]

I also have this problem.
Steps followed from the following tutorial link: https://www.streamsync.cloud/custom-components.html

[FabienArcellier]

Hello,

I have try on my side, it's working well. Could you try with these files extension.zip ? It will help to know if we have to look for on the build process or on the browser integration.

I have checked on chromium and firefox on ubuntu. Do you have info about your environment (browser, os, ...)

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different.
extension files from windows
extension files from ubuntu

@FabienArcellier i'll upload a video of it happening tomorrow.

[FabienArcellier]

I have done a diff on both files after reformating. I think the one from ubuntu (my version) is linked to the code of streamsync, the one on windows (your version) has built its own symbol.

The external link from vite.config.custom.js seems to be ignored on windows build. There is no trace in result file. @ramedina86 would have better understanding of this part than me.

/*
injectionKeys is externalised so that it can be linked at runtime.
Otherwise, new, independent instances of Symbol would be created, for which
nothing would be provided.
*/
const injectionKeysPath = fileURLToPath(
	new URL("src/injectionKeys.ts", import.meta.url),
);

Here is the diff of both file templates.umd.js after reformating, mine on ubuntu of the left, your on windows on the rigth
https://www.diffchecker.com/DStPaWJf/ (toke a look on line 2)

Could you share your list on npm dependencies ? Here is mine on ubuntu, I use node v16.20.2.

streamsync-ui@0.0.0 /xxxxxxxxxxxxxxxxx/ui
├── @apache-arrow/ts@12.0.1
├── @monaco-editor/loader@1.3.3
├── @rushstack/eslint-patch@1.4.0
├── @types/marked@5.0.1
├── @vitejs/plugin-vue@4.3.4
├── @vue/eslint-config-prettier@8.0.0
├── arquero@5.2.0
├── eslint-plugin-vue@9.17.0
├── eslint@8.50.0
├── leaflet@1.9.4 extraneous
├── marked@7.0.5
├── monaco-editor@0.41.0
├── plotly.js-dist-min@2.26.1
├── prettier@3.0.3
├── remixicon@3.5.0
├── typescript@5.2.2
├── vega-embed@6.22.2
├── vega-lite@5.15.0
├── vega@5.25.0
├── vite-plugin-monaco-editor@1.1.0
├── vite@4.4.9
├── volar-service-vetur@0.0.13 invalid: "latest" from the root project
├── vue-dompurify-html@4.1.4
└── vue@3.3.4

[FabienArcellier]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different. extension files from windows extension files from ubuntu

@FabienArcellier i'll upload a video of it happening tomorrow.

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different. extension files from windows extension files from ubuntu
@FabienArcellier i'll upload a video of it happening tomorrow.

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

[ZBMO]

I have done a diff on both files after reformating. I think the one from ubuntu (my version) is linked to the code of streamsync, the one on windows (your version) has built its own symbol.

The external link from vite.config.custom.js seems to be ignored on windows build. There is no trace in result file. @ramedina86 would have better understanding of this part than me.

/*
injectionKeys is externalised so that it can be linked at runtime.
Otherwise, new, independent instances of Symbol would be created, for which
nothing would be provided.
*/
const injectionKeysPath = fileURLToPath(
	new URL("src/injectionKeys.ts", import.meta.url),
);

Here is the diff of both file templates.umd.js after reformating, mine on ubuntu of the left, your on windows on the rigth https://www.diffchecker.com/DStPaWJf/ (toke a look on line 2)

Could you share your list on npm dependencies ? Here is mine on ubuntu, I use node v16.20.2.

streamsync-ui@0.0.0 /xxxxxxxxxxxxxxxxx/ui
├── @apache-arrow/ts@12.0.1
├── @monaco-editor/loader@1.3.3
├── @rushstack/eslint-patch@1.4.0
├── @types/marked@5.0.1
├── @vitejs/plugin-vue@4.3.4
├── @vue/eslint-config-prettier@8.0.0
├── arquero@5.2.0
├── eslint-plugin-vue@9.17.0
├── eslint@8.50.0
├── leaflet@1.9.4 extraneous
├── marked@7.0.5
├── monaco-editor@0.41.0
├── plotly.js-dist-min@2.26.1
├── prettier@3.0.3
├── remixicon@3.5.0
├── typescript@5.2.2
├── vega-embed@6.22.2
├── vega-lite@5.15.0
├── vega@5.25.0
├── vite-plugin-monaco-editor@1.1.0
├── vite@4.4.9
├── volar-service-vetur@0.0.13 invalid: "latest" from the root project
├── vue-dompurify-html@4.1.4
└── vue@3.3.4

here's mine on windows, npm 10.2.3, node 20.10.0

streamsync-ui@0.0.0 C:xxxxxxxxxxxxxxxxx\ui
├── @apache-arrow/ts@12.0.1
├── @monaco-editor/loader@1.4.0
├── @rushstack/eslint-patch@1.7.0
├── @types/marked@5.0.2
├── @vitejs/plugin-vue@4.6.2
├── @vue/eslint-config-prettier@8.0.0
├── arquero@5.4.0
├── eslint-plugin-vue@9.20.1
├── eslint@8.56.0
├── marked@7.0.5
├── monaco-editor@0.41.0
├── plotly.js-dist-min@2.28.0
├── prettier@3.2.2
├── remixicon@4.1.0 invalid: "latest" from the root project
├── typescript@5.3.3
├── vega-embed@6.24.0
├── vega-lite@5.16.3
├── vega@5.27.0
├── vite-plugin-monaco-editor@1.1.0
├── vite@4.5.1
├── volar-service-vetur@0.0.17 invalid: "latest" from the root project
├── vue-dompurify-html@4.1.4
└── vue@3.4.14

[FabienArcellier]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

ah so do "npm custom.build" on ubuntu and then use those two generated files on a windows streamsync app, I will do that.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

components built on ubuntu work on both systems, components built on windows don't work on either system.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

here's a clip of what happens when I use the windows-built files

ss-error-example.mp4

[FabienArcellier]

That's awesome, I think we should focus our investigation on the behavior of vite on windows.

[ZBMO]

That's awesome, I think we should focus our investigation on the behavior of vite on windows.

thanks, idk if this is relevant but I can develop the custom components on windows using the instant reload, so custom.dev works ok on windows, just not the custom.build

[FabienArcellier]

@ZBMO, @Killian604 and @joelwiesmann, I have opened a PR to fix the build on windows. It would be awesome if you could help us and take few minutes to check if it also solves the issue on your side.

[ZBMO]

@ZBMO, @Killian604 and @joelwiesmann, I have opened a PR to fix the build on windows. It would be awesome if you could help us and take few minutes to check if it also solves the issue on your side.

That works great, I tested it with the default bubble components and my own. thank you!

[ramedina86]

@FabienArcellier can you please confirm this is no longer an issue in 0.4.0?