Trouble with @babylonjs es6 modules and jest and typescript

Bugs
1

Not sure if this is the correct forum for this. Please excuse me if it’s not. I’m starting a project from scratch and I want to use the ES6 modules of BabylonJS with Typescript and Jest. Problem is that I can’t write the simplest unit tests using Babylon.

I’ve created a repo to demonstrate the problem.

I can create a regular unit test without babylon, but once I add a reference to one of babylon’s ES6 modules, it fails.

Any help would be greatly appreciated. I really want to make a lightweight app that doesn’t need a lot of Babylon’s extra features so I want to take advantage of tree shaking and get it down to the core.

Thanks,
Joe

2

pinging @RaananW

What error did you get?

3 
<rootDir>/BabylonTypeScriptJest/node_modules/@babylonjs/core/Engines/nullEngine.js:1
    import * as tslib_1 from "tslib";
           ^

    SyntaxError: Unexpected token *

      1 | import { Engine } from "@babylonjs/core/Engines/engine";
    > 2 | import { NullEngine } from "@babylonjs/core/Engines/nullEngine";
4

I am not sure why it imports * from tslib, this is a line that is added by typescript.

do you have tslib included as a dependency? could you try adding it as a devDependency and see if it helps?

5

Added “tslib”: “^1.11.0”, didn’t help. Same error. Could there be something in tsconfig?

6

Can I ask what node version you are using? 10 or under by any chance?

7

v10.16.0

8

Node 10 and under doesn’t support the * import style, and this is what it is complaining about. It seems like we should set node’s target in or package. This import doesn’t come from us but from TypeScript, otherwise we would have fixed it for sure.

Having said that, we build Babylon with node 10 as well with no problem. We need to check what causes this.

1 Like
9

@Deltakosh - what node version are you running when building?

10

Running exactly on that version :slight_smile: (v10.16.0)

Can you share your TSC -v output?

11

3.7.5

12

I’ll tell you the weirdest thing - we don’t have a line with * from tslib. we have imports, but not *. Is that an npm package? what version if I can ask?

13

The point is to have jest transform babylon’s .js files in node_modules. nodejs refuses to run them as-is because they use ESM modules (as of 2023-02 I believe this is still the case).

I managed to run jest in your demo repo, with node 10 and the following changes:

diff --git a/jest.config.js b/jest.config.js
index 91a2d2..6d6a94 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,14 @@
 module.exports = {
-  preset: 'ts-jest',
+  preset: 'ts-jest/presets/js-with-ts',
+  transformIgnorePatterns: [/* to have node_modules transformed*/],
   testEnvironment: 'node',
-};
\ No newline at end of file
+  globals: {
+    'ts-jest': {
+      isolatedModules: true, // to make type check faster
+      tsConfig: {            // to have tsc transform .js files
+        allowJs: true,
+        checkJs: false,
+      },
+    }
+  },
+};
6 Likes
14

npm package @babylonjs/core 4.0.3 had that import * as tslib line.

I’m guessing OP’s problem rose from running ES module build of babylon with node v10 and no transform. This usage may not be covered in build process (I didn’t look).

2 Likes
15

Thank, I’ll give it a try.

16

It worked! Thanks for helping me out.

1 Like
17

Hey all, I believe I’m suffering from a similar issue. I’m running node v16.13.2. This project is a create-react-app --template=typescript project. This is what happens when I run npm test.

Let me know if I can provide any other details!

Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript synt

ax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel c

onfiguration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it

.
• If you are trying to use TypeScript, see Getting Started · Jest
• To have some of your “node_modules” files transformed, you can specify a custom “transformIgnorePatterns” in yo
ur config.
• If you need a custom transformation specify a “transform” option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the “moduleNameM
apper” config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

C:\Users\HP\WebstormProjects\##########\node_modules\@babylonjs\core\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "./abstractScene";
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

> 1 | import { Mesh, MeshBuilder, Scene, Vector3, VertexData } from '@babylonjs/core';
    | ^
  2 |
  3 | import { Indices, VerticesList } from 'simulator/types';
  4 |

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (src/simulator/mesh-utils.ts:1:1)
18

I am actually running jest tests as we speak on babylon codebase, and I have no issue with that. What preset are you using? how does your jest configuration look like?

19

That’s because you Jest does not compile Babylon.

Try this jest.config.js, notice the config.js example

1 Like
20

You won’t have that problem if you are running tests against Babylon as codebase because Jest automatically compiles code base, but by default ignores everything in node_modules, which is the case of @nerdsrock .

2 Likes