javascriptreactjsgithub-actionsnpm-publishsemantic-release

Semantic Release publishing on package.json


I am currently try to auto publish my npm package to GitHub packages using semantic release with GitHub Actions. The package publishes successfully but when Installed, only the package.json file is found in the published package.

I have a build command that builds my package into a dist folder and would like to publish the contents of the dist folder to GitHub packages.

Below are the configuration files for the package release and GitHub Actions workflow

The workflow below runs the test and creates a new release to GitHub Packages

test-publish.yml

name: Test and Publish
on:
  push:
    branches: 'main'
    paths-ignore:
      - .gitignore
      - README.md

jobs:
  test-publish:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Check for forgotten it.only in unit tests
        run: "! git grep -F 'it.only' -- src/__tests__"
      - name: Install dependencies
        run: yarn
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Run Tests
        run: yarn test
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Prepare Publish to NPM
        run: yarn run preparePub
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Release
        run: npx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.NPM_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN_NPM: ${{ secrets.NPM_TOKEN }}

Below is the package.json package.json

{
  "name": "@organisation/component-library",
  "version": "0.0.0-semantic-release",
  "author": "Author Name",
  "license": "MIT",
  "description": "Component library",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/organisation/component-library.git"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rm -rf dist/ && yarn run prettier --write src/ && yarn run lint && yarn build:esm && yarn build:cjs",
    "build:cjs": "tsc --module CommonJS --OutDir dist/cjs",
    "build:esm": "tsc",
    "lint": "eslint src/**/*.ts src/**/*.tsx",
    "test": "jest",
    "preparePub": "yarn run build &&  cp package.json dist"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@semantic-release/commit-analyzer": "^9.0.2",
    "@semantic-release/github": "^8.0.6",
    "@semantic-release/npm": "^9.0.1",
    "@semantic-release/release-notes-generator": "^10.0.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@types/jest": "^29.0.3",
    "@types/node": "^18.7.15",
    "@types/react": "^18.0.18",
    "@types/react-dom": "^18.0.6",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.8",
    "husky": "^8.0.1",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
    "prettier": "^2.7.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "*"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn run lint && git add -A ."
    }
  },
  "dependencies": {
    "styled-components": "^5.3.6"
  }
}

The preparePub script is used to build the library and copy the package.json file to the list folder

Below is the semantic release config file where I set the package root to dist .releaserc

{
  "branches": [
    "main",
    {
      "name": "beta",
      "prerelease": true
    }
  ],
  "repositoryUrl": "https://github.com/organisation/component-library",
  "debug": "true",
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    [
      "@semantic-release/npm",
      {
        "pkgRoot": "dist"
      }
    ],
    "@semantic-release/github"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES5", "ES2015", "ES2016", "DOM", "ESNext"],
    "jsx": "react",
    "module": "ES2015",
    "moduleResolution": "node",
    "types": ["node", "jest", "@testing-library/jest-dom"],
    "declaration": true,
    "sourceMap": true,
    "outDir": "dist/esm",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/jest.setup.ts"]
}

The issue here is that the GitHub Actions pipeline seem to work fine but after the package is released to GitHub packages and installed in whatever app I want to use the library, only the package.json file is found within the installed library and none of the contents of the list folder.


Solution

  • The issue was with pkgRoot in .releaserc. Instead of setting it to dist, I set to dist/ and it somehow worked. Funny thing is, I have configured with just dist before and it worked. Thank you all for the effort.