[Solved] The requested module '@box2d/core' does not provide an export named 'b2Draw'

[8Observer8]

What is wrong with this JavaScript code: https://plnkr.co/edit/uCCFl4gDC4oOygxm

import { b2Draw } from "@box2d/core";
import { gl } from "./webgl-context.js";

// This class implements debug drawing callbacks that
// are invoked inside b2World::Step
export default class DebugDrawer extends b2Draw {

    DrawSolidPolygon(vertices, vertexCount, color) {
        // console.log(vertices);
        // console.log(color);
    }

    PushTransform(xf) {}
    PopTransform(xf) {}
    DrawPolygon(vertices, vertexCount, color) {}
    DrawCircle(center, radius, color) {}
    DrawSolidCircle(center, radius, axis, color) {}
    DrawSegment(p1, p2, color) {}
    DrawTransform(xf) {}
    DrawPoint(p, size, color) {}
}

[Lusito]

b2Draw is an interface. Javascript does not know interfaces. Only typescript does. Even if this was Typescript, you can only extend from another class, not from an interface. Interfaces are implemented (implements keyword).

The fix here is to remove the extends b2Draw and also the import statement.

As long as you have all methods in your class, it should work just fine.

[8Observer8]

It works: https://plnkr.co/edit/uCCFl4gDC4oOygxm

Thank you very much!

debug-drawer.js

import { gl } from "./webgl-context.js";

// This class implements debug drawing callbacks that
// are invoked inside b2World::Step
export default class DebugDrawer {

    DrawSolidPolygon(vertices, vertexCount, color) {
        console.log(vertices);
        // console.log(color);
    }

    PushTransform(xf) {}
    PopTransform(xf) {}
    DrawPolygon(vertices, vertexCount, color) {}
    DrawCircle(center, radius, color) {}
    DrawSolidCircle(center, radius, axis, color) {}
    DrawSegment(p1, p2, color) {}
    DrawTransform(xf) {}
    DrawPoint(p, size, color) {}
}