Splitting this out of pathscale/ui#280, where it was found.
What happens
<Toast.Provider /> compiles to a reference to the wrong export when the layouts application plugin is enabled.
With pluginSolid2LayoutsApplication enabled, the emitted call is:
createComponent(UI_MODULE.toast.Provider, { placement: "top-end" })
toast lowercase, the toast function, which has no .Provider. The page throws Comp is not a function at first render.
With the plugin disabled, the same source compiles correctly:
createComponent(UI_MODULE["default"].Provider, { placement: "top-end" })
which reaches the compound.
Why it is not the export collapse
pathscale/ui#280 fixes a separate packaging defect where Toast and toast were aliased onto one binding in the built entry. This reproduces after that fix, against a build where Toast and toast are verified as distinct exports and Toast resolves to Object.assign(ToastRoot, { Provider, ... }).
The plugin rewrites the import specifier from the bare @pathscale/ui to the resolved absolute path of the package entry, which changes how the bundler follows the re-export chain. That is where the two runs diverge.
Repro
- application: honey.id at
chore/ui-2.11.9
<Toast.Provider placement="top-end" /> in src/layouts/RootLayout.tsx
- toggle
pluginSolid2LayoutsApplication({ layouts: ["@pathscale/ui"] }) in rsbuild.config.ts and compare the emitted reference in the served bundle
Both Toast and ToastProvider are present in layouts.manifest.json as {"kind":"embedded"}, so the plugin has what it needs to resolve either form.
Workaround
Use the flat ToastProvider export, which is what this repository's own docs/component-migration-map.md already recommends ("the new Toast system (Toast/ToastProvider/ToastQueue)"). That works today.
Worth checking
Whether other compound members of an embedded Layout resolve correctly through the plugin, or whether Toast is only conspicuous because the package also exports a lowercase toast. In the application checked, Toast.Provider was the only dotted reference that survived into the output at all; every other compound tag was rewritten to a flat Layout reference as expected.
Splitting this out of pathscale/ui#280, where it was found.
What happens
<Toast.Provider />compiles to a reference to the wrong export when the layouts application plugin is enabled.With
pluginSolid2LayoutsApplicationenabled, the emitted call is:toastlowercase, the toast function, which has no.Provider. The page throwsComp is not a functionat first render.With the plugin disabled, the same source compiles correctly:
which reaches the compound.
Why it is not the export collapse
pathscale/ui#280 fixes a separate packaging defect where
Toastandtoastwere aliased onto one binding in the built entry. This reproduces after that fix, against a build whereToastandtoastare verified as distinct exports andToastresolves toObject.assign(ToastRoot, { Provider, ... }).The plugin rewrites the import specifier from the bare
@pathscale/uito the resolved absolute path of the package entry, which changes how the bundler follows the re-export chain. That is where the two runs diverge.Repro
chore/ui-2.11.9<Toast.Provider placement="top-end" />insrc/layouts/RootLayout.tsxpluginSolid2LayoutsApplication({ layouts: ["@pathscale/ui"] })inrsbuild.config.tsand compare the emitted reference in the served bundleBoth
ToastandToastProviderare present inlayouts.manifest.jsonas{"kind":"embedded"}, so the plugin has what it needs to resolve either form.Workaround
Use the flat
ToastProviderexport, which is what this repository's owndocs/component-migration-map.mdalready recommends ("the new Toast system (Toast/ToastProvider/ToastQueue)"). That works today.Worth checking
Whether other compound members of an embedded Layout resolve correctly through the plugin, or whether
Toastis only conspicuous because the package also exports a lowercasetoast. In the application checked,Toast.Providerwas the only dotted reference that survived into the output at all; every other compound tag was rewritten to a flat Layout reference as expected.