melonJS: Typescript error since version 14: "File "../melonjs.module.d.ts" is not a module"

Describe the bug When using the latest version of melonjs in a Typescript project, trying to build the project generates an error by the Typescript transpiler.

To Reproduce

Create this simple project using Typescript and Vite. The project consist of only 4 files in a folder:

package.json

{
  "name": "testmelon2ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.9.3",
    "vite": "^3.2.3"
  },
  "dependencies": {
    "melonjs": "^13.4.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "useDefineForClassFields": true,
    "module": "ES6",
    "lib": ["ES6", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true,
    "allowJs": true
  },
  "include": ["src"]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <h1>Welcome to MelonJS</h1>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

src/main.ts

import * as me from 'melonjs';

me.device.onReady(() => {
  if(!me.video.init(1218, 562, {scale: 'auto'})) {
    alert('Your browser does not support HTML5 canvas');
    return;
  }

  me.game.world.addChild(new me.ColorLayer('background', '#0000BB'));
});

Run npm install to install the packages.
Run npm run build to run the Typescript transpiler. The process run successfully.
Run npm run dev to deploy a test server. The result is the expected (a “Welcome to MelonJS” title and a blue scene)
Update the melonjs library to the latest version (npm install melonjs@^14.0.0). You can also use any 14.x.x version.
Run npm run build to run the Typescript transpiler. This time Typescript gives an error:

src/main.ts:1:21 - error TS2306: File '(project folder)/node_modules/melonjs/dist/melonjs.module.d.ts' is not a module.

1 import * as me from 'melonjs';
                      ~~~~~~~~~

Expected behavior The code should run and build normally like in the previous version, as according to the changelog there is no changes in the API used in this code.

Device information:

Device: PC
OS: Windows 10 Pro
Browser: Firefox
melonJS Version: 14.1.1
NodeJS Version: 19.1.0
NPM Version: 8.19.3

Additional context Running npm run dev with the updated melonjs runs the code correctly. Not sure why, as I’m not fully aware of how Vite works, but probably it’s linked to some check disabled.

I don’t think the issue is related to Vite, as I tried with a Webpack project with the same result.

I tried changing the values of “moduleResolution” and “module” in the tsconfig.json file to “NodeNext” but it didn’t work

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 20 (12 by maintainers)

Commits related to this issue

fix TypeScript `.d.ts` file generation & definition (thanks @lartkma) — committed to melonjs/melonJS by obiot 2 years ago
[#1162] add a tsconfig file for types generation — committed to melonjs/melonJS by obiot 2 years ago
[#1166] fix missing TS definitions when publishing on NPM (following changes in #1162) — committed to melonjs/melonJS by obiot 2 years ago

Most upvoted comments

@lartkma any feedback by any chance ?

I’ve just tested it, and it seems to work. I can compile the test project and I got the type suggestions. You only need to make sure all the files generated in dist/types (and not only dist/types/index.d.ts) are packaged in the published version, elsewhere it won’t work (or at least you won’t get type suggestions)

lartkma on Dec 17, 2022

Hi, I’m new with melonJS I tried to install it on a Angular 14 App.

In the beginning I got some error like :

Error: node_modules/melonjs/dist/melonjs.module.d.ts:128:5 - error TS2416: Property 'resize' in type 'BitmapText' is not assignable to the same property in base type 'Renderable'.
  Type '(scale: number) => BitmapText' is not assignable to type '(w: number, h: number) => Rect'.
    Call signature return types 'BitmapText' and 'Rect' are incompatible.
      The types of 'scale(...).pos.onResetEvent' are incompatible between these types.
        Type '(x: number, y: number, z: number, settings: any) => ObservableVector3d' is not assignable to type '(x?: number | undefined, y?: number | undefined) => Vector2d'.

128     resize(scale: number): BitmapText;
        ~~~~~~

And :

Error: src/app/app.module.ts:3:21 - error TS2306: File '/home/pascal/Dev/melon/node_modules/melonjs/dist/melonjs.module.d.ts' is not a module.

3 import * as me from 'melonjs/dist/melonjs.module.js';
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And after some try I success to launch the “Hello World”. Here my code : https://framagit.org/lascapi/melonjs-in-angular/

Thank’s for your work 😃

87113 on Dec 15, 2022