WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.5k stars 4.2k forks source link

Intra-monorepo dependencies are too broad and often break #32703

Open anomiex opened 3 years ago

anomiex commented 3 years ago

Description

It seems fairly common that you introduce an "experimental" API in one module and use it in others, then later on remove the experimental API (e.g. by promoting it to stable) while updating the other modules to use the new version.

That's ok. The problem is that the dependencies between your modules do not reflect this. For example, I recently had some trouble in a project with a dependency on @wordpress/components 9.2.6: that version of @wordpress/components depends on @wordpress/element ^2.11.0, but the promotion of __experimentalCreateInterpolateElement to stable in 2.13.0 breaks the older @wordpress/components. So when the package manager got confused about its locks (due to an unrelated package upgrade) and upgraded @wordpress/element to 2.20.3, things broke.

Possible ways to have avoided this:

I'm not asking that you go back and update all the old releases of all the modules. I am asking that you consider this sort of thing going forward.

Step-by-step reproduction instructions

  1. In an empty directory, npm add --legacy-peer-deps @wordpress/components@9.2.6 @automattic/calypso-build webpack
  2. Create src/index.js with contents const components = require( "@wordpress/components" );
  3. Run npx calypso-build

You could also use webpack directly instead of calypso-build; the latter just provides in a useful default configuration for webpack.

Expected behaviour

No missing imports.

Actual behaviour

ERROR in ./node_modules/@wordpress/components/build-module/text-highlight/index.js 24:9-47
export '__experimentalCreateInterpolateElement' (imported as '__experimentalCreateInterpolateElement') was not found in '@wordpress/element' (possible exports: Children, Component, Fragment, Platform, RawHTML, StrictMode, Suspense, cloneElement, concatChildren, createContext, createElement, createInterpolateElement, createPortal, createRef, findDOMNode, forwardRef, isEmptyElement, isValidElement, lazy, memo, render, renderToString, switchChildrenNodeName, unmountComponentAtNode, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState)
 @ ./node_modules/@wordpress/components/build-module/index.js 72:0-60 72:0-60
 @ ./src/index.js 1:17-49

WordPress information

Device information

gziolo commented 3 years ago

I listed it as a topic to discuss in the weekly Core JS chat on WordPress Slack in the #core-js channel.

Meeting dates can be found at https://make.wordpress.org/meetings/:

Screen Shot 2021-06-18 at 10 52 32