Skip to content

Fix broken standalone npm install in pattern-creator & pattern-directory (#754)#755

Open
obenland wants to merge 3 commits into
trunkfrom
fix/754-pattern-creator-npm-install
Open

Fix broken standalone npm install in pattern-creator & pattern-directory (#754)#755
obenland wants to merge 3 commits into
trunkfrom
fix/754-pattern-creator-npm-install

Conversation

@obenland

@obenland obenland commented Jul 6, 2026

Copy link
Copy Markdown
Member

Fixes #754.

Problem

#746 bumped @wordpress/scripts to 32.3.0 (the React-19 generation) in every workspace and fully migrated the theme's runtime @wordpress/* dependencies to the matching generation — but left the two plugins' runtime dependencies on the old React-18 generation.

Each plugin's package.json was therefore internally inconsistent: @wordpress/scripts required react@^19 while @wordpress/block-editor and friends required react@^18. A standalone npm install inside the plugin directory (which is how it's deployed on the wordpress.org sandbox) failed with a fatal ERESOLVE:

npm error Conflicting peer dependency: [email protected]
npm error   peer react@"^19.2.4" from @wordpress/[email protected]

The monorepo root install papered over this via npm's workspace nesting, so it only surfaced standalone.

Fix

Complete the migration #746 started for the theme, and address the fallout:

  • package.json (both plugins) — bump runtime @wordpress/* dependencies to the React-19 generation the theme already uses (block-editor 15.20, components 34, element 7, …). All the __experimental/__unstable APIs the creator relies on were verified to still exist in these versions.
  • webpack.config.js (creator) — add a fullySpecified: false resolve rule. The creator intentionally bundles @wordpress/editor (it isn't registered on the front end), and editor's newer ESM build imports the CommonJS diff package via extensionless subpaths that webpack 5 otherwise refuses to resolve.
  • jest.config.js (creator) — map bare @wordpress/* imports to their built CommonJS entry. These packages ship a react-native field pointing at untranspiled src, which jsdom's browser export condition falls back to, causing Jest to execute raw ESM/TypeScript source and drag in untransformed dependencies. Also transpile the few ESM-only leaf deps (uuid, marked) the built packages import.

Verification

  • ✅ Standalone npm install now completes for both plugins (no fatal ERESOLVE)
  • ✅ Root monorepo npm install succeeds
  • npm run build succeeds for both pattern-creator and pattern-directory
  • npm run test:unit --workspace=wporg-pattern-creator — 37/37 tests pass (matches trunk)
  • npm run lint:js passes for both workspaces

The remaining npm warn ERESOLVE overriding peer dependency warnings on the directory plugin are non-fatal: a transitively-resolved @wordpress/[email protected] declares react@^18 (the WordPress packages reverted React 19 between 15.20 and 15.23), which npm auto-overrides. Installation completes successfully.

🤖 Generated with Claude Code

#746 bumped `@wordpress/scripts` to 32.3.0 (React 19 era) in every
workspace and fully migrated the theme's runtime `@wordpress/*`
dependencies to the matching generation, but left the two plugins'
runtime dependencies on the old React-18 generation. Each plugin's
`package.json` was therefore internally inconsistent — `scripts`
required `react@^19` while `block-editor` et al. required `react@^18` —
so a standalone `npm install` (as on the wordpress.org sandbox) failed
with ERESOLVE (#754).

Align both plugins' runtime `@wordpress/*` dependencies with the
React-19 generation the theme already uses, and fix the fallout:

- pattern-creator/pattern-directory `package.json`: bump runtime
  `@wordpress/*` deps to the React-19 generation (block-editor 15.20,
  components 34, element 7, …). All the `__experimental`/`__unstable`
  APIs the creator relies on still exist in these versions.
- pattern-creator `webpack.config.js`: add a `fullySpecified: false`
  rule. The creator deliberately bundles `@wordpress/editor`, whose
  newer ESM build imports the CommonJS `diff` package via extensionless
  subpaths that webpack 5 otherwise refuses to resolve.
- pattern-creator `jest.config.js`: map bare `@wordpress/*` imports to
  their built CommonJS entry. These packages ship a `react-native`
  field pointing at untranspiled `src`, which jsdom's `browser` export
  condition falls back to, making Jest execute raw ESM/TypeScript source
  and pull in untransformed deps. Also transpile the few ESM-only leaf
  dependencies (uuid, marked) that the built packages import.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01MJAbX3ist1XFiqb78Cu2TN
Copilot AI review requested due to automatic review settings July 6, 2026 20:38

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes standalone npm install failures in the two plugin workspaces by aligning their runtime @wordpress/* dependencies with the React 19 generation required by @wordpress/[email protected], and by adjusting the pattern-creator build/test tooling to handle newer ESM packaging.

Changes:

  • Bump @wordpress/* runtime dependencies in pattern-creator and pattern-directory to React 19–compatible versions to eliminate ERESOLVE peer conflicts during standalone installs.
  • Update pattern-creator’s webpack config to relax “fully specified” ESM resolution so bundled @wordpress/* ESM can import certain CommonJS deps (e.g. diff) via extensionless subpaths.
  • Update pattern-creator’s Jest config to map bare @wordpress/* imports to built CommonJS outputs and transpile a few ESM-only leaf deps used by those builds.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

File Description
public_html/wp-content/plugins/pattern-directory/package.json Updates runtime @wordpress/* dependency versions to match the React 19 tooling baseline and allow standalone installs.
public_html/wp-content/plugins/pattern-creator/package.json Updates runtime @wordpress/* dependency versions (plus related packages) to remove the React 18/19 peer mismatch in standalone installs.
public_html/wp-content/plugins/pattern-creator/webpack.config.js Adds a webpack resolve rule for fullySpecified: false to accommodate newer ESM import patterns in bundled @wordpress/* packages.
public_html/wp-content/plugins/pattern-creator/jest.config.js Maps @wordpress/* to built CJS entries and expands Jest transforms to handle ESM-only transitive deps during unit tests.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread public_html/wp-content/plugins/pattern-creator/webpack.config.js
@obenland
obenland requested a review from bor0 July 6, 2026 20:55
@obenland

obenland commented Jul 6, 2026

Copy link
Copy Markdown
Member Author

@bor0 Could I ask for your review when you get a chance?

obenland and others added 2 commits July 6, 2026 15:56
The extensionless-subpath problem is confined to bundled @wordpress/*
ESM under node_modules, so limit the `fullySpecified: false` relaxation
to those files and keep strict ESM resolution for project source.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01MJAbX3ist1XFiqb78Cu2TN
Condense the explanatory comments added for the Jest module mapping and
the webpack fullySpecified rule.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01MJAbX3ist1XFiqb78Cu2TN

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated no new comments.

@bor0

bor0 commented Jul 13, 2026

Copy link
Copy Markdown
Member

Hi @obenland, thanks for this PR!

On my sandbox, I get another error (even after wiping ~/.npm folder):

[email protected]:/home/wporg$ wget "https://patch-diff.githubusercontent.com/raw/WordPress/pattern-directory/pull/755.diff"
--2026-07-13 16:05:53--  https://patch-diff.githubusercontent.com/raw/WordPress/pattern-directory/pull/755.diff
Resolving patch-diff.githubusercontent.com (patch-diff.githubusercontent.com)... 140.82.114.4
Connecting to patch-diff.githubusercontent.com (patch-diff.githubusercontent.com)|140.82.114.4|:443... connected.
HTTP request sent, awaiting response... 200 OK
Cookie coming from patch-diff.githubusercontent.com attempted to set domain to github.com
Cookie coming from patch-diff.githubusercontent.com attempted to set domain to github.com
Length: unspecified [text/plain]
Saving to: '755.diff'

755.diff                                 [ <=>                                                                 ]   1.86M  --.-KB/s    in 0.01s   

2026-07-13 16:05:53 (161 MB/s) - '755.diff' saved [1951279]

[email protected]:/home/wporg$ patch -p1 < 755.diff 
can't find file to patch at input line 5
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff --git a/package-lock.json b/package-lock.json
|index 8bd5493e..c6d1db4f 100644
|--- a/package-lock.json
|+++ b/package-lock.json
--------------------------
File to patch: 
Skip this patch? [y] 
Skipping patch.
107 out of 107 hunks ignored
patching file public_html/wp-content/plugins/pattern-creator/jest.config.js
patching file public_html/wp-content/plugins/pattern-creator/package.json
patching file public_html/wp-content/plugins/pattern-creator/webpack.config.js
patching file public_html/wp-content/plugins/pattern-directory/package.json
[email protected]:/home/wporg$ cd /home/wporg/public_html/wp-content/plugins/pattern-creator
[email protected]:/home/wporg/public_html/wp-content/plugins/pattern-creator$ rm -rf node_modules
[email protected]:/home/wporg/public_html/wp-content/plugins/pattern-creator$ npm install
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   peer react@"^19.2.4" from @wordpress/[email protected]
npm error   node_modules/@wordpress/block-editor
npm error     @wordpress/block-editor@"15.20.0" from the root project
npm error     @wordpress/block-editor@"^15.20.0" from @wordpress/[email protected]
npm error     node_modules/@wordpress/block-library
npm error       @wordpress/block-library@"9.47.0" from the root project
npm error       1 more (@wordpress/edit-post)
npm error     4 more (@wordpress/core-data, @wordpress/edit-post, ...)
npm error   peer react@"^19.2.7" from [email protected]
npm error   node_modules/react-dom
npm error     peer react-dom@"^19.2.4" from @wordpress/[email protected]
npm error     node_modules/@wordpress/block-editor
npm error       @wordpress/block-editor@"15.20.0" from the root project
npm error       5 more (@wordpress/block-library, @wordpress/core-data, ...)
npm error     peer react-dom@"^19.2.4" from @wordpress/[email protected]
npm error     node_modules/@wordpress/block-library
npm error       @wordpress/block-library@"9.47.0" from the root project
npm error       1 more (@wordpress/edit-post)
npm error     8 more (@wordpress/components, @wordpress/core-data, ...)
npm error   16 more (@wordpress/block-library, @wordpress/blocks, ...)
npm error
npm error Could not resolve dependency:
npm error dev @wordpress/scripts@"27.2.0" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@"^18.0.0" from @wordpress/[email protected]
npm error   node_modules/@wordpress/scripts
npm error     dev @wordpress/scripts@"27.2.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/wporgdev/.npm/_logs/2026-07-13T16_03_31_900Z-eresolve-report.txt
npm notice
npm notice New major version of npm available! 11.16.0 -> 12.0.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v12.0.1
npm notice To update run: npm install -g [email protected]
npm notice
npm error A complete log of this run can be found in: /home/wporgdev/.npm/_logs/2026-07-13T16_03_31_900Z-debug-0.log

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[dev] Can't npm install in pattern-creator

3 participants