Search code examples
typescriptvisual-studio-codecreatejseaseljsparceljs

Is it possible to use EaselJS (CreateJS) with TypeScript using parceljs?


I'm trying to make a game with EaselJS, and since it's [current year], I'm using TypeScript. There are "official" types that I'm using from here, but I can't get it working together with parceljs. If I import the types, parcel fails. If I import without types, parcel is happy (and my build works), but I've got no types in VS Code.

Here's my import, which works for the parcel build:

import * as createjs from '@createjs/easeljs';

VS Code throws an info warning on this line stating Could not find a declaration file for module '@createjs/easeljs'., and the types don't work.

Here's an import that makes VS Code happy, but parcel sad:

import 'createjs';

Now the types for EaselJS work in VS Code, but the parcel build fails with src/main.ts:3:8: Cannot resolve dependency 'createjs'. Not cool!

Here's my package.json:

{
  "name": "corona-coaster",
  "version": "0.1.0",
  "license": "GPL-3.0-only",
  "dependencies": {
    "@createjs/easeljs": "^2.0.0-beta.4",
    "createjs": "^1.0.1",
    "sty": "^0.6.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.0",
    "@types/createjs": "^0.0.29",
    "@types/easeljs": "^1.0.0",
    "@types/jest": "^26.0.4",
    "@types/tweenjs": "^1.0.1",
    "jest": "^26.1.0",
    "jest-extended": "^0.11.5",
    "parcel-bundler": "^1.12.4",
    "sass": "^1.26.10",
    "ts-jest": "^26.1.1",
    "typescript": "^3.9.6"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --public-url ./",
    "test": "jest"
  },
  "jest": {
    "preset": "ts-jest",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/testSetup.ts"
    ]
  }
}

And my tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ]
    },
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

The GitHub repo is here. I cannot switch to webpack.


Solution

  • I found a workaround. Use the createjs-module package instead, and use this as your import statement:

    import * as createjs from 'createjs-module';
    

    Congrats! The struggle is now over. No need to do anything special in the tsconfig, and no need to include types yourself - they are included in createjs-module. Neat!

    Credit goes to this comment.