Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 10 months ago
Comments:19 (11 by maintainers)

Top GitHub Comments

1reaction

lartkmacommented, Dec 17, 2022

@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)

1reaction

87113commented, Dec 15, 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 😃

Top Results From Across the Web

TypeScript typings give me "index.d.ts is not a module"

I have installed the typings using npm i @types/webrtc --save-dev . Hovering over RTCPeerConnection in const peerConnection1 = new RTCPeerConnection(); display ...

TypeScript ES6 import module File is not a module error

I am using TypeScript 1.6 with ES6 modules syntax. My files are: test.ts: module App { export ... ' is not a module....

melonjs/public - Gitter

I go to localhost:8000 and the melonJS canvas shows, it loads to max (the green loading bar) but nothing happends and no console...

File is not a module error in TypeScript | bobbyhadz

We used the export keyword to export the sum function. Now we can import it in the index.ts file.

MelonJS - Best of JS

melonJS 2 is a modern version of the melonJS game engine. ... melonjs.module.d.ts, typescript declaration file for the ES6 Module (ESM) Bundle ...