Fix @automattic/component and @automattic/i18n-utils packages

[chihsuan]

I'm trying to upgrade @automattic/tour-kit to 1.1.3 in WooCommerce (woocommerce/woocommerce#47129) but encountering several issues due to @automattic/components and its dependencies.

../woocommerce-admin build:project:bundle: ERROR in ../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@automattic/components/dist/esm/jetpack-upsell-card/index.js 10:0-78
../woocommerce-admin build:project:bundle: Module not found: Error: Can't resolve '../../assets/jetpack-product-icon-videopress.svg' in '/home/runner/work/woocommerce/woocommerce/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@automattic/components/dist/esm/jetpack-upsell-card'
../woocommerce-admin build:project:bundle:  @ 
../woocommerce-admin build:project:bundle: ERROR in ../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@automattic/components/src/icons/eye.tsx 5:1
../woocommerce-admin build:project:bundle: Module parse failed: Unexpected token (5:1)
../woocommerce-admin build:project:bundle: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
../woocommerce-admin build:project:bundle: | // TODO: replace with an icon when available.
../woocommerce-admin build:project:bundle: | const eye = (
../woocommerce-admin build:project:bundle: > 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

Proposed Changes

This PR addresses the following issues:

• Adds the missing dependencies to the @automattic/i18n-utils package.
• Fix import path in packages/components/src/post-stats-card/index.tsx. It should use relative paths instead of absolute paths so build versions of the components package can be used in other packages without issues.
• Fix components assets. It used Symbolic link to assets. This caused the issue when building the components package. I update the files to use the actual assets instead of symbolic link and move them to src/ path.

Testing Instructions

• This PR doesn't introduce any new features, so just review the code changes and ensure they are correct.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106334

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106334&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106334&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/component on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~46 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
jetpack-cloud-features-comparison       -120 B  (-0.0%)      -46 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~109 bytes removed 📉 [gzipped])

name                                                      parsed_size           gzip_size
async-load-calypso-my-sites-stats-jetpack-upsell-section       -814 B  (-6.1%)     -109 B  (-2.4%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[moon0326]

LGTM and tested well 👍 🚀

I tried a clean install and everything built well.

I'm getting the following error, but I think this is unrelated.

[psealock]

Code changes look good 🚢