Installed NPM package import fails

Ask the community
,
1

Hi there,
I have requested the webdav NPM package and after it was approved I tried to use it in one of my backend functions. The webdav package is compatible with Node version >= 10, so there should be no compatibility issues.

Both require and import syntax fail with the error:
“Error loading web module backend/sync.js: Cannot find module ‘webdav’”.

and the stack trace:
"Require stack:

  • /user-code/backend/sync.js
  • /user-code/stubmodule-that-does-the-require.js
  • /elementory/node_modules/scoped-require/index.js
  • /elementory/factories.js
  • /elementory/create-app.js
  • /elementory/cloud-grid-runner.js"

I get the same error when the package is not installed, so it seems like something is going wrong when installing the package.
Anyone has an idea how to fix this problem?

2

I tried this out myself and got pretty much the same results. I checked with the Wix NPM library team and was told that libraries are "checked from reputation perspective and that there aren’t any technical limitations preventing it from being used in a Velo site, but it doesn’t actually get tested ". Wix is unable to provide support on each specific package and we are unable to ensure that it will function as expected. That’s really up to the package’s developer.

You should really bring this up with the package developer to see what else might be needed in order to get this to work, such as dependencies, special coding, mystical chants, etc.

The other option would be if there is another similar package that provides the same or similar functionality.

3

Thanks for the swift response,

I understand that you can not provide support on NPM packages, but I would expect that making sure there “aren’t any technical limitations preventing it from being used in a Velo site” means the package is at least available for import.

Could you give me any pointer to further diagnose the issue myself, e.g how does the environment differ from just vanilla Node.js, how does module import differ? I have used this package on the same version of Node on my machine without any extra installation of dependencies, just a ‘npm install’, so I really think the problem must be in the different environment/module resolution. Any more details on that would be very helpful:)

thank you,
Jannes

4

I played some more with my test site, and I’m able to get it so that it doesn’t spit out all of those error messages. However, I’m getting an unauthorized access error since I don’t have a valid site to access for a “complete” test.

This library may or not actually work on a Wix site. What we do is to check that the package doesn’t contain any malicious code or install scripts (that force other programs on the system). Wix is unable to test each library to ensure that it in fact works on the Wix ecosystem, that is for the user to determine with the assistance of the package developer.

It is possible that some packages may be approved even when they are not compatible, since they might have managed to slip through our ruling system. See the Package Support documentation for more details.

5

Ok I understand what you mean now. Thank you very much for taking some time to investigate this, really appreciate it:)

“I played some more with my test site, and I’m able to get it so that it doesn’t spit out all of those error messages.”

Could you elaborate what you did? It would really be great if I can make this exact package working, there are no good alternatives on NPM, so my alternative is running this functionality on an extra server that exposes an HTTP API that I can use from my backend. It’s much more effort though.

6

Well, it’s not the best test, and it’s not really intended to work, but it didn’t complain too loudly…

import { createClient } from "webdav";

...

export async function test() {

   const client = createClient(
      "https://www.wix.com", {
         username: "test",
         password: "test p/w"
      }
   );

   // Get directory contents
   const directoryItems = await client.getDirectoryContents("/");
   console.log('directoryItems', directoryItems);
}

OK - so I know that doesn’t look so great, and you might have grounds to doubt my sanity, but as I said, it didn’t spit out all of the error messages, and that’s all I was looking for.

The webdav package itself requires access to the DOM (which Wix does not support) and it depends on the way that the package is built if you can execute other functionality that doesn’t use any UI or DOM access (which was what my little example was trying to avoid). Perhaps the webdav developer (or community) can answer why it does or doesn’t work once you limit the access to the DOM.

If you get it working, please post an article to the Tips, Techniques, Examples category, and we can then celebrate over a pitcher (or 10) of beer. I’m buying.

7

Sorry I don’t get it, how exactly does that work for you? How do you import the webdav package? Like I said, no matter which import method I tried, such code as you have there won’t run for me due to the import failing.

8

Plain old import statement as I just now added to my previously posted snippet:

import { createClient } from "webdav";
9

Oh, another thing… it seemed to work better (even in Preview) after I published my test site.

10

Well, my code suddenly works without having changed it! :slight_smile:

Maybe there is a delay in between being able to install a package and being actually able to import it. But I didn’t even get any error message before running the function, the editor did not show a warning for the import statement (which is does if the package is not installed).

Anyways, now it works, but if someone else runs into this in the future, maybe wait a few days and see if it works then…

Thanks for your help Yisreal!

11

I’m glad you got it working. Did you publish? Maybe that’s what was needed?

12

@yisrael-wix No I did not publish, it just worked suddenly without any change either to the code or any other change of the site. I did uninstall and reinstall the webdav package a few times though in between, so maybe that helped.