Error during initialization in Vue App — Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

[mv-debug]

Hi all, I see an error if I use this module. Do you get in touch with this in the past?

I use it like this:

import NextcloudClient from "nextcloud-link";
export default {
  data() {
    return {
      ....
    };
  },
  methods: {
    async save_to_nc() {
      const client = new NextcloudClient({
        url: "https://nc..",
        password: "xxxx",
        username: "yyy",
      });
      while (true) {
        if (await client.checkConnectivity()) {
          console.log("we are in");
        }

        await new Promise((resolve) => setTimeout(resolve, 5000));
      };

....

Stacktrace:
_Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at client.js:1:17501
    at client.js:9:6417
    at client.js:1:249
    at client.js:9:7260
    at client.js:1:249
    at client.js:11:2754
    at client.js:1:249
    at client.js:11:2934
    at client.js:1:249
    at client.js:11:3874_

[kwisatz]

@mv-debug

Unfortunately, your stack-trace isn't exactly helping, but what I can say is that nextcloud-link is actually a nodejs library, not a front-end/browser library. It depends on nodejs features that are not (in the same way) available in the browser. If anything, they'd have to be polyfilled.

I can see if someone in the team has a moment to reproduce your issue, but it will take some time.

Out of curiosity, what is your use-case? What are you trying to solve using nextcloud-link in the browser?

[mv-debug]

@kwisatz Thank you for the fast response. This code snippet above is only a test if a connection could be established. I wrote an app with speech to text recognition and the result text should be uploaded to Nextcloud - this is the use case. I use vite for creating the app.

"devDependencies": {
    "autoprefixer": "^10.4.2",
    "daisyui": "^2.6.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23",
    "vite": "^2.8.6"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vue": "^3.2.45"
  }

The upload to the Nextcloud instance via curl is working and also mount it as WebDAV in nautilus. So I do not have an idea what it's going wrong.

[kwisatz]

As I mentioned before, nextcloud-link does not officially have support for being used in a browser. There are too many components (streams, filesystem access, request module, etc.) that the current version assumes to be available. That doesn't mean that some functionalities couldn't be used in a browser-context, but there is currently no support for that, it hasn't been developed with this in mind and it has never been tested (except by yourself just now).

How did you install nextcloud-link, we can't spot it among your package.json's dependencies.

[mv-debug]

@kwisatz I think I do not know what this mean “used in a browser”. I would like to use this JavaScript module to upload a file to the Nextcloud instance via JavaScript in the Web App. This is the scope of this module, correct? Correct, in this package.json it is not included—I used npm as the package manager and I installed the version 1.2.9.

[kwisatz]

@mv-debug think client-server architecture.

The code you're working on that uses vue for rendering a UI is front-end or client code that runs in a web-browser (or a web-view in case of a mobile application). Your code is probably transpiled by vite (rollup/webpack) and then executed by the javascript engine of a web-browser.

nextcloud-link was made to be used on the server. It must be used inside code that is run or executed by a nodejs process.

The nodejs ecosystem adds features to its V8 javascript engine that are not available within the javascript engines of web-browsers or mobile phones. And nextcloud-link needs those additional features to function.

I hope I have been able to explain the difference.