Fix instances of deprecated folder mapping within exports in package.json

[notjosh]

Background

Hiya from Shop infra! 👋

A recent PR pulled @shopify/checkout-ui-extensions into Shop, and now we're getting warnings like the following:

(node:25986) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /path/to/project/node_modules/@shopify/checkout-ui-extensions/package.json.
Update this package.json to use a subpath pattern like "./*".

It's not a problem unique to us - see other instances in major(ish) projects:

• Fix deprecated warning in package.json export module (fix #2047) vuejs/vuex#2048
• Fix deprecated folder mapping "./" in the "exports" field module reso… postcss/postcss#1456
• Update package.json: changed pattern "./" to "./*" microsoft/tslib#135
• Fix #1465 elastic/elasticsearch-js#1593

Solution

There are two common solutions:

1. Replace "./": "./" with "./*": "./*"
2. Add "./*": "./*" above "./": "./"

There was a window where solution 2 wouldn't work for some versions of Node 12 (ref), so some projects opted for solution 1.

I've opted for solution 2 simply because Node 12 is out of LTS in 4 days (and the latest versions of 12.x work fine for anyone still using Node 12), so I doubt it's going to have any meaningful impact.

🎩

The simplest way to test this is just setting up a small project:

Set up

mkdir /tmp/import-test
cd /tmp/import-test
yarn init -y
yarn add @shopify/checkout-ui-extensions
echo 'import("@shopify/checkout-ui-extensions/index.js");' > index.mjs

Existing functionality

$ node index.mjs
(node:29456) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /private/tmp/test/node_modules/@shopify/checkout-ui-extensions/package.json imported from /private/tmp/test/index.mjs.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Fixed functionality

Updating @shopify/checkout-ui-extensions without publishing can be mimicked by just updating node_modules/@shopify/checkout-ui-extensions/package.json to replace "./": "./" with "./*": "./*" (as this PR does)

$ node index.mjs
$ # no warning!

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[marvinhagemeister]

ping @jamesvidler . Might be that this PR got lost in your notifications.

[lemonmade]

For checkout and post-purchase extensions, I believe we actually want to remove this condition altogether. We do not intend for you to be able to deeply import into the package.

[jamesvidler]

Would this have any side-effects on the other packages in this PR if we make this change? I'm not familiar with how this folder mapping works.

[jamesvidler]

Since I already have a PR open for publishing new versions of our packages, i'll make the change to the checkout-ui-extensions packages in there.

[jamesvidler]

Actually, there's no harm in shipping this before the packages are published since i'll be merging with main anyhow prior to publishing.

I don't have context on the other packages though in this PR. @lemonmade do you feel comfortable approving this?

[lemonmade]

No, this mapping just determines what files are accessible to importers of the package. Conceivably, removing this could break consumers, if they are importing "deeply" from the package in a way we do not intend. I'm ok with breaking this use case, though.