Resolve the import

Keep the component doc import and package exports map aligned, then verify the packed package.

Export the component

Apps copy the component doc's import field into their code, so that exact specifier must resolve from your packed package. integration add writes it together with an exports entry in package.json.

package.json
json
"exports": {
  "./components/AcmeCarousel": "./components/AcmeCarousel.tsx"
}

Add writes the entry only when package.json already has an exports map, so start every package with "exports": {}.

Verify the packed import

integration verify installs the packed package in a temporary app, resolves each documented import, and checks that the module exports the documented component name.

bash
npx astryx integration verify
  • component_import_unresolvable means the exports map has no entry for the documented import.
  • component_export_missing means the module does not export the documented name, or package.json has no exports map.
  • typescript_extension_in_specifier means the public import ends in .ts or .tsx.

To import from the package root, set import: '@acme/astryx-widgets' and re-export the component from the file that exports["."] points to. See astryx docs cli/commands/integration-verify.