Error: Cannot find module 'tslib' with my own library

Question

First of all, I'm not at all familiar with the typescript configuration file, so it's very likely that the problem comes from there.

I just published an npm package, but when I want to use it with simple JavaScript, I get the following error: "Error: Cannot find module 'tslib'".

When I look closely at the file concerned, there is indeed the module 'tslib' which is imported, but I specify that it is imported by TypeScript during compilation.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Languages = void 0;
const tslib_1 = require("tslib");

I would like my module to be able to be used in TypeScript, or in Javascript by default.

Here is the link of the project on Github to see the configuration files more easily: https://github.com/pioupia/Carbon.js

Here is the TypeScript configuration on the project (copied from Discord.js):

{
  "compilerOptions": {
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "useUnknownInCatchVariables": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true,
    "pretty": true,
    "allowSyntheticDefaultImports": true,

    // Modules
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noImplicitAny": true,

    // Emit
    "declaration": true,
    "declarationMap": true,
    "importHelpers": true,
    "importsNotUsedAsValues": "error",
    "inlineSources": true,
    "newLine": "lf",
    "noEmitHelpers": true,
    "outDir": "dist/esm",
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    // Language and Environment
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es5", "es2015", "es2016", "dom", "esnext"],
    "types": ["node"],
    "target": "ES2021",
    "useDefineForClassFields": true

  },
  "include": [
    "src/**/*.ts",
    "src/**/*.json"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "src/**/tests"
  ],
  "assets": []
}

And here is my package.json file:

{
  "name": "carbonimg",
  "version": "1.0.0-BETA",
  "description": "A Carbon image generator from code",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "npm run build && jest --watchAll --verbose --coverage",
    "build": "rm -rf dist/ && tsc && npm run build:esm && npm run build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
    "prepublish": "npm run build",
    "start": "npm run build && node ."
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/pioupia/Carbon.js.git"
  },
  "bugs": {
    "url": "https://github.com/pioupia/Carbon.js/issues"
  },
  "homepage": "https://github.com/pioupia/Carbon.js",
  "keywords": [
    "carbon",
    "javascript",
    "code-image",
    "beautiful"
  ],
  "author": "Pioupia",
  "license": "MIT",
  "dependencies": {
    "canvas": "^2.11.0",
    "jest": "^29.4.2",
    "prismjs": "^1.29.0"
  },
  "devDependencies": {
    "@babel/helper-create-class-features-plugin": "^7.20.12",
    "@babel/plugin-transform-typescript": "^7.20.13",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.18.6",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.13.0",
    "@types/prismjs": "^1.26.0"
  }
}

How can I fix this, and successfully launch a project in TS and JS with my module?

I thank you in advance, and wish you a good day!

Answer 1

I don't remember exactly why this mistake was made.

However, in reality, you don't really need to change the value of module for the package to run in both JavaScript and TypeScript. Therefore, I have left only the CommonJS value for the module. I also deleted the moduleResolution line in my TypeScript configuration.

I also had the same error with the prismjs types. The error was solved by simply changing the package from devDependencies to dependencies. Thanks to this, the package was directly installed at the same time as mine, and the problem was solved!

New tsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "skipLibCheck": true,
    "strict": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.json"
  ],
  "exclude": ["node_modules"]
}

new scripts object in the package.json file:

{
  "scripts": {
    "test": "npm run build && jest --watchAll --verbose --coverage",
    "build": "rm -rf dist/ && tsc",
    "prepublish": "npm run build",
    "start": "npm run build && node ."
  }
}