Search code examples
javascriptnpmpackage

Files missing from custom module npm package

I created a new npm package (leon-theme) here: https://www.npmjs.com/package/leon-theme

Github here: https://github.com/leongaban/leon-theme

Locally after running npm run build in the custom package, the dist folder builds correct, however when I publish it, all the files are missing except for the README and package.json.

Thus if I try to import my new package into a brand new react app, it cannot find the module.

https://www.npmjs.com/package/leon-theme?activeTab=code

tsconfig

{
  "compilerOptions": {
    "module": "ES6",
    "target": "es2016",
    "lib": ["ES2020", "DOM"],
    "jsx": "react",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": false,
    "outDir": "./dist/lib/es6",
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

main package.json

{
  "name": "leon-theme",
  "version": "1.0.0",
  "module": "lib/es6/index.js",
  "description": "A simple React style & component library",
  "scripts": {
    "build": "rm -rf dist/lib && tsc --build"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.22",
    "jest-environment-jsdom": "^29.7.0",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"
  },
  "files": [
    "dist"
  ],
  "types": "dist/index/.d.ts"
}

package.json in dist folder

{
  "name": "leon-theme",
  "version": "0.0.6",
  "module": "lib/es6/index.js",
  "description": "A simple React style & component library",
  "homepage": "https://github.com/leongaban/leon-theme",
  "bugs": {
    "url": "https://github.com/leongaban/leon-theme/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/leongaban/leon-theme.git"
  },
  "keywords": [
    "javascript",
    "theme",
    "buttons",
    "leon"
  ],
  "scripts": {
    "build": "rm -rf dist/lib && tsc --build"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.22",
    "jest-environment-jsdom": "^29.7.0",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"
  },
  "files": [
    "dist"
  ],
  "types": "dist/index/.d.ts"
}

enter image description here

enter image description here

Solution

  • The dist/package.json file is causing this problem, it looks like a trimmed down version of the package.json, same thing with the README.md. You don't need those files in the dist folder, they'll get included regardless. Read more here.

    Delete those two files and it works correctly.

    The problem is also nothing to do with npmjs.org specifically but with npm. You can test these changes by just running npm pack which will make a TAR file (leon-theme-1.0.0.tgz) of the package that would be published. You can open this file with something like 7-zip, or the command output shows the included files.

    With the dist/package.json and dist/README.md removed the output now shows the files included:

    PS \repos\leon-theme> npm pack
npm notice 
npm notice package: [email protected]
npm notice === Tarball Contents ===
npm notice 226B dist/lib/es6/components/Button/Button.js
npm notice 69B  dist/lib/es6/components/Button/index.js
npm notice 131B dist/lib/es6/components/index.js
npm notice 72B  dist/lib/es6/components/LeonTheme/index.js
npm notice 63B  dist/lib/es6/index.js
npm notice 305B dist/lib/es6/components/LeonTheme/LeonTheme.js
npm notice 518B package.json
npm notice 327B dist/lib/es6/components/Button/Button.js.map
npm notice 171B dist/lib/es6/components/Button/index.js.map
npm notice 222B dist/lib/es6/components/index.js.map
npm notice 174B dist/lib/es6/components/LeonTheme/index.js.map
npm notice 127B dist/lib/es6/index.js.map
npm notice 387B dist/lib/es6/components/LeonTheme/LeonTheme.js.map
npm notice 184B README.md
npm notice === Tarball Details ===
npm notice name:          leon-theme
npm notice version:       1.0.0
npm notice filename:      leon-theme-1.0.0.tgz
npm notice package size:  1.4 kB
npm notice unpacked size: 3.0 kB
npm notice shasum:        8e22b9a71680a31c72bbc813815dc30249b49f1b
npm notice integrity:     sha512-Nj92cJ+JOybD/[...]Hse0hWLqWWuFA==
npm notice total files:   14
npm notice
leon-theme-1.0.0.tgz