Add modularized imports to the exports field

[pavel]

I was trying to make @phosphor-icons/react work with the new modularized imports feature in Next.js.

It should:

1. Improve the bundle size
2. Increase compilation speed thanks to skipping unused files.

I tried adding this configuration to my next.config.js:

const config = {
// ...
  modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/icons/{{member}}',
    },
  },
// ... 
}

Unfortunately, it fails with the following error:

Error: Package subpath './Trash' is not defined by "exports" in /Users/[REDACTED]/node_modules/@phosphor-icons/react/package.json 

I was reading through @phosphor-icons/react package.json files and saw that that exports field only allows root import. Adding a new subpath fixed the issue:

{
  "exports": {
    ".": {
      "import": "./dist/index.es.js"
    },
    "./*": {
      "import": "./dist/icons/*.es.js"
    }
  },
}

I suggest adding this path to the exports field to allow users opt-in to the modularized imports if they want. I believe it's generally a good practice to allow this.

[pavel]

Happy to send a PR @rektdeckard. 👍

[Tobias Fried]

Thanks for this @prichodko. Already in flight!