How to export / import and extend a class in backend

Ask the community
,
1

I’m trying to build a class based SquareUp interface in the backend. But I can’t seem to be able to import or extend a class across different files in the backend. (it works as expected in ‘public’ with the exact same code). It does not matter how complex or how simple the classes are, I am unable to import or extend a class ‘backend’. I will illustrate with a very simple class.

Question:
How does one export / import classes in ‘backend’ ?

Bullet point summary

  • Unable to extend classes across files in ‘backend’

  • If I put the classes all in the same file I can extend them. But I need to be able to reuse them in other files.

  • It doesn’t matter which import / export syntax is used. None of it works as expected in ‘backend’

  • The exact same code can be used in the ‘public’ directory and it works as expected.

  • any code or comment with a ’ . ’ will have a space on either side because this forum thinks anything with a dot is a hyperlink and won’t allow it.

Here is a very simple code example, which fails exactly the same way as more complex code:

Error

Error loading web module backend/possum . jsw: Class extends value undefined is not a constructor or null

backend/animal .jsw

export class Animal {

    constructor(name) {
        this . name = name
    }

    speak(words) {
        console . log(`${this . name} says ${words}`)
    }
}

backend/possum.jsw

import {Animal} from 'backend / animal .jsw'

class Oppossum extends Animal {
	constructor(name){
		super(name);
	}
}

export function critter(words = "I can haz banana?"){
	const bill = new Oppossum('bill');
    bill . speak(words)
}
2

Just to reiterate, my code snippets have inserted spaces on either side of every dot character because the forum won’t allow me to post without adding the spaces. (It thinks any dot character indicates a hyperlink)

3

You don’t show how you create and invoke an instance.

Keep in mind that there are two different backend file types : .jsw (web modules) and .js. You said " If I put the classes all in the same file I can extend them. But I need to be able to reuse them in other files. " I believe that you need to put your classes in .js files and not .jsw files (web modules), which are for used for importing and invoking from front end code.

4

Just tried that. And I’l say that it ‘sort of’ works, but not really. If I put ‘Animal’ into a .js file, then put ‘Oppossum’ in a .jsw file, the Oppossum class works as expected, but is completely encapsulated within the backend. If I try to instantiate an Oppossum in the front end I get the error " Failed to process file ‘public/pages/c1dmp.js’. Access to backend script ‘backend/animalJS.js’ denied! Client-side scripts can only import web-modules (.jsw) from backend code context."

Ultimately I do need to get the results into the front end. Is there a way to do that?

5

Even if I write out an elaborate chain of spaghetti code that keeps everything but the return value (a string) encapsulated in the backend so that all the frontend would be able to see (if it worked) is “I can haz banana?”, I still get the same error as the red writing above.

6

The issue is that you can’t really import a class from the backend (server side) since it is not within the same context as the frontend (browser). You can return an object, which is an instance of the class, from the backend to the frontend. However, for the frontend to understand what it is, the frontend will also need to have the same class files in the frontend (eg. in the Public folder).

So, in order to use your classes, you will need to include the class files in both the frontend and the backend.

7

@yisrael-wix & @hooliator you can define your class in frontend module and import them in the back so no need to duplicate the code :slight_smile:

8

Is this article still true?

I am developing a completely backend Class that never needs to communicate with Frontend. It makes server API calls and writes its output to collections.

But when I create my class Aaa in backend/tools.jsx and try to import from backend/doWork.jsx, using " import { Aaa } from “backend/tools” ; " syntax I get null for the variable Aaa? This is standard Javascript?

I don’t understand why WIX does not support this on a modern node platform?
Am I doing something wrong?

If put my class Aaa in a backend/tools.js file, would it be exposed to the frontEnd and compromise security?
Would I then be able to import it into backend/doWork.jsx?

I have been searching for these answers for awhile. It seems so simple to be so overlooked…help!