patternfly / patternfly/patternfly-react

Bug - Package Publishing - Published Libraries should follow NPM dual module package standards

Open
#11,686 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Breaking change :boom: Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

PatternFly libraries should follow NPM standards for publishing dual module (CommonJS/ESModule) packages.

PatternFly packages have

  "main": "dist/js/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",

This is a really early format when es modules were being initially developed and not supported by modern tooling.

NPM documentation links to this as the right way to handle dual module packages.

{
  "type": "module",
  "exports": {
    "import": "./index.mjs",
    "require": "./index.cjs"
  }
}

Modern tooling like vite builds libraries with a combination of both for compatibility.

{
  "name": "my-lib",
  "type": "module",
  "main": "./dist/my-lib.umd.cjs",
  "types": "./dist/my-lib.d.ts",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

This is currently blocking us from using vitest to test because it gets really confused. It tries to import the code as ESM but then is unhappy that the package is not marked as type "module". If we manually add type 'module', it then runs into some code that uses a 'require', which is not valid in the scope of a module.

PatternFly packages should support both ESM and CommonJS using NPM standards for better compatibility.

This affects all PF packages not just react-core.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the package metadata fields shown in the issue across all PatternFly packages, then reproduce the current module-resolution problem with vitest. Check the NPM package-examples and Vite library-mode references first; done means every affected package supports both ESM and CommonJS through standard package metadata.

Written by the indexing model from the issue text.

Assessment

Tech stack
nodejs, typescript
Domain
build-system, developer-experience, release
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.