Using dojo (legacy aka dojotoolkit) in a new vite application

68 views Asked by At

We have a legacy application written in TypeScript and Knockout that has sporadic use of dojo 1.x (on, when, Evented, store/Memory, Deferreds) that we are slowly converting to React. We have used the concepts of https://github.com/Retsam/ko-react to rewrite components to React while still keeping Knockout in charge of main rendering and routing.

We are now considering switching things around so that React is in charge of the app, and will use Vite for that. We have setup a PoC using the something similar to https://github.com/zeekrey/vite-vanilla-ts-knockout and it looks promising.

However, in a transitional phase we still need to import and use dojo, and are struggling to find a good way to import/require it since dojo is not available as an esmodule.

Our first attempt (after npm i dojo and npm i --save-dev @types/dojo) is accepted by typescript/vscode:

import Evented from "dojo/Evented";
class QueryEngine<Query> extends Evented {
   ...
}

But fails when running (web browser console):

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/dojo_Evented.js?v=12a266d3' does not provide an export named 'default' (at QueryEngine.ts:4:8)

We have also tried various options like:

import Evented = require("dojo/Evented");

Which results in

Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.ts(1202)

And also these with various error messages:

import * as dojo from "dojo"; // File '...node_modules/@types/dojo/index.d.ts' is not a module.ts(2306)
import { Evented } from "dojo"; // Same as above

import * as Evented from "dojo/Evented"; // Use of Evented then says Type '{ default: typeof Evented; prototype: Evented; }' is not a constructor function type.ts(2507)

const Evented = require("dojo/Evented"); // which of course fails in the browser since there is no require-function

Is our best option to just import dojo directly in the browser with a script tag (like shown in the docs) and then use a *.d.ts file to declare dojo as a globally available module that we use or do we have other options?

0

There are 0 answers