How to use (esm|cjs)/core/utils in package

[Woyken]

When publishing a package we build both esm and cjs versions.
We want to use some utils from iTwinUI.
We're supposed to import them from @itwin/itwinui-react/esm/core/utils and @itwin/itwinui-react/cjs/core/utils

If we import from ./esm/core/utils we end up with cjs compiled code: require('@itwin/itwinui-react/esm/core/utils')
Which will import esm module, not cjs.

Maybe it's worth considering redirecting imports with "exports" field to appropriate folders, and allowing import without specifying type @itwin/itwinui-react/core/utils would import -> @itwin/itwinui-react/cjs/core/utils or esm.
Although I couldn't make this work in few quick tests...

I know that this solution would work for sure:
publishing single dist folder
It would contain .mjs and .cjs files
then exports property in package.json could look something like:

{
    "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.mjs"
      },
      "require": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.cjs"
      }
    },
    "./core/utils": {
      "import": {
        "types": "./dist/core/utils/index.d.ts",
        "default": "./dist/core/utils/index.mjs"
      },
      "require": {
        "types": "./dist/core/utils/index.d.ts",
        "default": "./dist/core/utils/index.cjs"
      }
    }
  }
}

If imported from cjs project, it will include cjs files, if imported from esm project will import esm files automatically

This would be a breaking change, would have to release with major version

[mayank99]

Short answer is: don't use it. That's the reason they are not properly exposed. Most of them are even marked as "private".

Is there a particular utility from iTwinUI that you would benefit from? We already have plans to make a public Popover component in the next major.

[Woyken]

We ended up using
Popover
InputContainer for wrapping custom WYSIWYG input container
SvgStatusError for displaying error for same container

But if Popover or it's alternative ends up in public, that's fine.
We can wire our own wrapper instead of using iTwinUI's internal InputContainer

Thanks

[mayank99]

Good to know, thanks.

Yeah Popover will be properly rewritten in v3. Track issue: #914. For now use floating-ui or radix-ui.

InputContainer will also be refactored and publicly exposed in some form in v3. Track issue: #983. For now make your own using Flex, Label and StatusMessage (all publicly available).

For svgs, it is generally recommended to use the @itwin/itwinui-icons-react package. But StatusMessage might cover your needs.