"Cannot find module '@babylonjs/core'" when trying to set the project up with TypeScript and tree-shaking

Questions
1

I’m trying to set up a blank Babylon project with Typescript and tree-shaking, but I get the following error when trying to use Babylon:

Cannot find module '@babylonjs/core' or its corresponding type declarations.

The same happens when I try to import specific features, such as /Engines/engine. I’ve installed @babylonjs/core and @types/babylonjs, and added "babylonjs" inside the "types" array in tsconfig.json.

You can view the code-base on GitHub: babylon-setup (github.com).

Alternatively, you can view (what I believe are) the core excerpts down below.

package.json 

{
  "name": "model_test_1",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },
  "keywords": [
    "Babylon.js",
    "webpack",
    "typescript",
    "es6"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/babylonjs": "^2.4.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "@babylonjs/core": "^4.2.0"
  }
}

Note: I’ve tried installing @babylonjs/core both as a dev and a non-dev dependecy, to no obvious effect. Which is it supposed to be? The docs say to install it as a dev-dependency, but the Basic Boilerplate project doesn’t.

tsconfig.js 

{
  "compilerOptions": {
    "target": "es2016",
    "module": "esNext",
    "rootDir": "./src",
    "moduleResolution": "node",
    "types": [
      "babylonjs"
    ],
    "noResolve": true,
    "declaration": true,
    "removeComments": true,
    "inlineSourceMap": true,
    "preserveConstEnums": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "skipLibCheck": true
  }
}

webpack.config.js:

const path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    devServer: {
        static: "./dist",
        hot: true,
        open: true,
        compress: true,
        https: true
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    devtool: "inline-source-map",
    plugins: [],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader", // I've tried the 'loader' key instead of 'use', but nothing changed. Again, which is the right one?
                exclude: /node_modules/
            }
        ]
    }
};
2

You should remove

"types": [
      "babylonjs"
    ],

and remove you @types/babylonjs dependencies as they are not required.

3

@sebavan Thanks, I’ve removed them. Although, that’s how it was originally. I added them in my attempts to fix the problem.

Indeed, removing them didn’t fix the issue. :disappointed:

4

you also need in your index to do

const engine: Engine = new Engine(canvas, true);

instead of

const engine: Engine = new BABYLON.Engine(canvas, true);

and remove noResolve from your tsConfig, as you actually do need to resolve

1 Like
5

It was the "noResolve" flag! Thanks. I’m still new to the JS world, so I don’t really know what I’m doing in the tsconfig.json file. Just copying values I found online.

As for the Engine problem… Oops? :sweat_smile: I noticed it, too, but too late.

1 Like