Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Package exports are treated as "externals" #925

Open
oravecz opened this issue Nov 22, 2024 · 0 comments
Open

Package exports are treated as "externals" #925

oravecz opened this issue Nov 22, 2024 · 0 comments

Comments

@oravecz
Copy link

oravecz commented Nov 22, 2024

tl;dr

I am dynamic importing a component using the * modifier so that my import map values take precedence over the external dependencies in the package. When I do this, a self-referencing import declared and used within the package is now considered unresolvable because the * modifier is treating the self-import as an external dependency and not including it in the initial import list.

My request is that any path's referenced in the package.json are not excluded as external dependencies when serving up the package.

More detailed explanation

I am attempting a dynamic import of a React component from a remote library. The default import is a component called <SampleWidget /> in the package.

Please note: I am hardcoding the path to the import for this example. In my actual program, it's path is
determined based on a policy server.

const RunTimeWidget = lazy(() => import('http://myesmserver/*@myscope/mywidgets'));

My package is @myscope/mywidgets and exports a <SampleWidget /> and a <Clock />, and I am allowing consuming applications to access the <Clock /> component directly.

{
  "name": "@myscope/mywidgets",
  "exports": {
    ".": {
      "require": "./dist/cjs/sample-widget.cjs",
      "import": "./dist/esm/index.js"
    },
    "./clock": "./dist/esm/components/clock/Clock.js",
    "./package.json": "./package.json"
  },
}

In my case, <SampleWidget /> also has a dependency on <Clock />. The code I publish (built using Vite) contains the following import in the SampleWidget.js file.

import Clock from "../clock/Clock.js";

When this package is served up from esm.sh, the build process recognizes the import as a self-import and reworks it to be

import V from "@myscope/mywidgets/clock"

Since this is no longer a relative URL - and this package isn't known at build time - the import fails.

The ways (I see) to get this to succeed is one of the following, but none are workable for my use case.

  1. Manually specify the externals in the URL to fetch. Not realistic as the import map contains dozens of entries, and the URL becomes unmaintainable.
  2. Add @myscope/mywidgets/clock to an import map, however this is a dynamically loaded component and unknown at build time.
  3. Do not use the * modifier to exclude externals, but this bypasses my importmap and results in duplicate loading of components which are large and/or should be singletons
  4. Break my package up so the <Clock /> component is included in another package - bad developer experience, and undesirable for several reasons specific to our use of remote components. Having the ability to associate multiple components in a package by name is a key feature.

I don't think the suppression of externals should contain those paths contained in the package's exports property.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant