Importing antd@4.6.1 is loading a sub-dependency with version mis-match and failing to load.

[JayaKrishnaNamburu]

Bug

I am trying to load antd using https://jspm.dev/antd@4.6.1 and on of it sub-dependency is failing to load. Here are the screenshots

Steps to reproduce

Antd has a dependency of "rc-image": "~3.0.2", which you can refer here --> https://unpkg.com/browse/antd@4.6.1/package.json. And"rc-imagetries to load another dependency calledrc-utilwith version number5.0.6`. Which you can refer here --> https://unpkg.com/browse/rc-image@3.0.2/package.json

Now, rc-util is exporting a module called rafhere --> https://unpkg.com/browse/rc-util@5.0.6/lib/raf.js

Now, it's resulting in two errors.

1. The issue is, now rc-util with version number 5.0.6 is failing to load and throwing 404 from jspm. You can directly hit and check using this link --> https://jspm.dev/npm:rc-util@5.0.6
2. If we refer to the second screenshot, it is trying to load rc-util with version number as 5 and not as `5.0.6

[JayaKrishnaNamburu]

I am just curious about on other issue relates to the same package, an another file from the same package uses react from the imports. But it is not defined in the package.json field. Here you can see it is being used --> https://unpkg.com/browse/rc-util@5.0.6/es/Children/toArray.js

Here we can see the package.json which doesn't define react or react-dom which are being used --> https://unpkg.com/browse/rc-util@5.0.6/package.json

So, is it something like, if the imported dependency is not found in the pcakge.json. It falls back to the default import like import _react2 from '/npm:react!cjs'; which uses the latest version of react. Because, skypack which does serve esm packages throws error in cases like these. Since the dependency version is missing.

[guybedford]

So the problem here is that rc-util is not getting lib/raf.js detected as one of its public exports. On the other hand we can see eg lib/ref.js is detected fine - https://jspm.dev/npm:rc-util@5/lib/ref.

This is because the exports detection is a statistical process that there can be gaps like this.

The best route to take in these scenarios is to upstream a PR adding the package.json "exports" field to the original package, as that will always guarantee the public exports.

For your other question, yes imports that are not defined in the package.json just default to the latest version. This was implemented to support cases like this where packages don't include the dependency, very much for the React-style workflows where a sort of peer dependency is expected.

This does mean the resolved version might be wrong, but is better than it not working. For local workflows using the CLI being released soon, it is possible to override this version resolution to ensure that the correct version is used.

[JayaKrishnaNamburu]

Hi guybedford, thanks for the explanation 😄, i made a PR to the package to add the exports field and peerDependencies. Can you help in checking out the change once if you don't mind here --> https://github.com/react-component/util/pull/138/files

[guybedford]

@JayaKrishnaNamburu amazing, thanks for putting that together. Note though that that would be a breaking change for the library in Node.js since the interface would change unfortunately.

It could also be advisable to just keep the mappings the same as currently, something like:

{
  "exports": {
    "./lib/": "./lib/",
    "./es/": "./es/"
  }
}

sort of thing.

Ideally all the entry points would be listed explicitly. These are the ones detected by jspm so far:

{
  "exports": {
    "./lib/KeyCode": "./lib/KeyCode.js",
    "./lib/Dom/addEventListener": "./lib/Dom/addEventListener.js",
    "./es/KeyCode": "./es/KeyCode.js",
    "./es/Dom/addEventListener": "./es/Dom/addEventListener.js",
    "./lib/Children/toArray": "./lib/Children/toArray.js",
    "./lib/PureRenderMixin": "./lib/PureRenderMixin.js",
    "./lib/warning": "./lib/warning.js",
    "./es/Children/toArray": "./es/Children/toArray.js",
    "./es/warning": "./es/warning.js",
    "./es/PureRenderMixin": "./es/PureRenderMixin.js",
    "./lib/createChainedFunction": "./lib/createChainedFunction.js",
    "./lib/Dom/findDOMNode": "./lib/Dom/findDOMNode.js",
    "./es/Dom/findDOMNode": "./es/Dom/findDOMNode.js",
    "./es/createChainedFunction": "./es/createChainedFunction.js",
    "./lib/hooks/useMergedState": "./lib/hooks/useMergedState.js",
    "./lib/hooks/useMemo": "./lib/hooks/useMemo.js",
    "./lib/Children/mapSelf": "./lib/Children/mapSelf.js",
    "./es/hooks/useMemo": "./es/hooks/useMemo.js",
    "./lib/Dom/contains": "./lib/Dom/contains.js",
    "./lib/getScrollBarSize": "./lib/getScrollBarSize.js",
    "./es/hooks/useMergedState": "./es/hooks/useMergedState.js",
    "./es/Children/mapSelf": "./es/Children/mapSelf.js",
    "./es/getScrollBarSize": "./es/getScrollBarSize.js",
    "./lib/ref": "./lib/ref.js",
    "./es/ref": "./es/ref.js",
    "./lib/Portal": "./lib/Portal.js",
    "./lib/ContainerRender": "./lib/ContainerRender.js",
    "./es/Dom/contains": "./es/Dom/contains.js",
    "./es/Portal": "./es/Portal.js",
    "./es/ContainerRender": "./es/ContainerRender.js",
    "./lib/getContainerRenderMixin": "./lib/getContainerRenderMixin.js",
    "./lib/Dom/class": "./lib/Dom/class.js",
    "./lib/utils/get": "./lib/utils/get.js",
    "./lib/Dom/css": "./lib/Dom/css.js",
    "./es/getContainerRenderMixin": "./es/getContainerRenderMixin.js",
    "./es/Dom/class": "./es/Dom/class.js",
    "./lib/PortalWrapper": "./lib/PortalWrapper.js",
    "./es/PortalWrapper": "./es/PortalWrapper.js",
    "./lib/unsafeLifecyclesPolyfill": "./lib/unsafeLifecyclesPolyfill.js",
    "./lib/pickAttrs": "./lib/pickAttrs.js",
    "./es/unsafeLifecyclesPolyfill": "./es/unsafeLifecyclesPolyfill.js",
    "./es/pickAttrs": "./es/pickAttrs.js",
    "./lib/utils/set": "./lib/utils/set.js",
    "./lib/switchScrollingEffect": "./lib/switchScrollingEffect.js",
    "./es/utils/set": "./es/utils/set.js",
    "./es/utils/get": "./es/utils/get.js",
    "./es/switchScrollingEffect": "./es/switchScrollingEffect.js",
    "./lib/Dom/addEventListener.js": "./lib/Dom/addEventListener.js",

Let me take another look at this on the server itself to see if I can't get it to rebuild for you with the missing export though...

[JayaKrishnaNamburu]

Thank you, it will help a lot for the library and makes it easy to adopt for the exports map 😀

[guybedford]

Ok, https://jspm.dev/npm:rc-util@5/lib/raf!cjs now exists. Let me know if that helps?

[JayaKrishnaNamburu]

Definitely it helps, thanks for the quick response 😀

[JayaKrishnaNamburu]

Just one more doubt, why raf from rc-util is pointing to 5 when the dependency from rc-image is 5.0.6 (https://unpkg.com/browse/rc-image@3.0.2/package.json) . Because if it's 5 then it is not pinning the dependency right ?

[guybedford]

@JayaKrishnaNamburu the @5 is because of a semver range in the package.json file. jspm.dev does not implement version lock - it works to semver ranges. For version lock the new CLI will be coming out soon featuring this functionality with import maps. See for example the jspm sandbox itself for how this will look here - view-source:https://jspm.org/sandbox (view source on that page). The CLI is complete to generate this in a single command, it's just polish and docs and posting that I'm still working on. If you'd like to try it out ahead of time do let me know though.

[JayaKrishnaNamburu]

Thanks for the updates @guybedford, yeah i would be interested in giving it a try if you have any beta access 😄 👍

[guybedford]

Is this issue still a problem or can it be closed?

[JayaKrishnaNamburu]

It's working now, it can be closed 👍