CODEWITHSUNDEEP
typescriptpackage.jsones6-modulestsconfignpm-publish
Nizar Zouaoui
Nizar Zouaoui

Reputation: 11

Publish typescript NPM package with submodules: Cannot find module 'nizar-npm-publish-test/mult/multiply' or its corresponding type declarations

I'm trying to publish a TS package to NPM containing CommonJs and esm, but i'm getting 2 issues. 1- I can't seem to get to build the esm files as .mjs files, as a work around, I'm editing the files extensions manually before publishing them to npm but I'm not sure if it's the right thing to do, so all insights on that matter would be great. 2- when trying to import anything from that package, I'm not having any issues with the main file, but if I try to import from any other file, i get this error: Cannot find module 'nizar-npm-publish-test/mult/multiply' or its corresponding type declarations.ts(2307)

This is the structure of my TS package:

This is what I'm using for the build: package.json:

 "main": "index.js",
  "files": [
    "build/cjs",
    "build/esm",
    "build/@types"
  ],
  "types": "build/@types",
  "exports": {
    ".": {
      "import": "./build/esm/index.mjs",
      "require": "./build/cjs/index.js"
    },
    "./*": {
      "import": "./build/esm/*.mjs",
      "require": "./build/cjs/*.js"
    },
    "./mult/*": {
      "import": "./build/esm/mult/*.mjs",
      "require": "./build/cjs/mult/*.js"
    },
    "./types":"./build/@types/index.d.ts",
    "./types/*": "./build/@types/*.d.ts",
    "./types/mult/*":"./build/@types/*.d.ts"
  },
  "scripts": {
    "clean": "rimraf build",
    "build": "yarn clean && yarn build:esm && yarn build:cjs && yarn build:types",
    "build:esm": "tsc -p tsconfig.prod.json --module ES2022 --outDir build/esm",
    "build:cjs": "tsc -p tsconfig.prod.json --module commonjs --outDir build/cjs",
    "build:types": "tsc --p tsconfig.types.prod.json -emitDeclarationOnly",
    "test": "echo \"Error: no test specified\" && exit 1",
    "launch": "npx ts-node src/index"
  },

tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "rootDir": ".",
    "outDir": "build",
    "sourceMap": false,
    "target": "ESNext",
    "noEmit": false,
    "module": "CommonJS",
    "moduleResolution": "node",
    "declaration": true
  },
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },
  "include": ["."],
  "exclude": ["build", "node_modules", ".turbo", "coverage", "dist"],
  "moduleResolution": ["node_modules", "node"]
}

And the tsconfig.types.prod.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "composite": false,
    "outDir" : "build/@types"
  },
  "exclude": [
    "build",
    "coverage",
    "node_modules",
    ".turbo",
    "coverage",
    "dist",
    "**/__test__",
    "__test__",
    "__mocks__",
    "**/__mocks__",
    "*.config.js",
    "*.config.ts",
    ".env",
    "src/**/*.test.ts"
  ]
}

and this is the import: imports

and the ts error i talked about in the beginning: ts error on import

PS: They (add and multiply functions) both work, I just need to resolve the TS error.

Upvotes: 0

Views: 68

Answers (2)

Nizar Zouaoui
Nizar Zouaoui

Reputation: 11

So I resolved the entire problem, the package now is compatible nodejs APIs, Reactjs Vite, and NextJS. Here's a documented example: https://github.com/nizar-zouaoui/npm-publish.

Upvotes: 0

Nizar Zouaoui
Nizar Zouaoui

Reputation: 11

Update: I didn't need the .mjs part anymore in the workaround I found but, it's quite ugly for a solution and any help to improve it would be great:

First I updated the exports to this:

  "main": "build/cjs/index.js",
  "module": "build/esm/index.js",
  "types": "build/esm/index.d.ts",
  "files": [
    "build/cjs",
    "build/esm"
  ],
  "exports": {
    ".": {
      "import": "./build/esm/index.js",
      "require": "./build/cjs/index.js",
      "types": "./build/esm/index.d.ts"
    },
    "./*": {
      "import": "./build/esm/*.js",
      "require": "./build/cjs/*.js",
      "types": "./build/esm/*.d.ts"
    }

And ended up creating this new tree:

  • substract/package.json
  • mult/multiply/package.json
  • mult/divide/package.json

Each of these new package.json files now contain a similar object to this.

{
  "name": "substract",
  "description": "This way it's recognizable by the TypeScript compiler",
  "main": "../build/cjs/substract.js",
  "module": "../build/esm/substract.js",
  "types": "../build/esm/substract.d.ts"
}

The issue now is that if I have a lot of files that will be imported later, it will cause me to create as much package.json files.

Upvotes: 1

Related Questions