Describe the bug
When wrapping a React component that must be imported from a package subpath (e.g., react-map-gl/maplibre), there's no way to specify the subpath for the main library attribute. The library attribute only accepts a package name for npm installation, not a subpath.
If you use ImportVar with package_path to import from the correct subpath, the import system still generates an additional bare import from the main library attribute, which fails when the package doesn't export from its root.
To Reproduce
Try this component
import reflex as rx
from reflex.utils.imports import ImportVar
MapLibreMap.create(
map_style="https://demotiles.maplibre.org/style.json",
initial_view_state={
"longitude": 174.0,
"latitude": -41.0,
"zoom": 2.5,
},
style={"width": "100%", "height": "500px"},
),
class MapLibreMap(rx.NoSSRComponent):
"""MapLibre GL JS map component using react-map-gl with MapLibre."""
library = "react-map-gl" # Only installs package, but also generates: import "react-map-gl"
map_style: rx.Var[str]
initial_view_state: rx.Var[dict]
on_click: rx.EventHandler[lambda e: [e.lngLat]]
def add_imports(self) -> dict:
"""Add MapLibre GL CSS and Map component from react-map-gl/maplibre."""
return {
"": "maplibre-gl/dist/maplibre-gl.css",
"react-map-gl": ImportVar(
tag="Map",
alias="MapLibreMap",
is_default=False,
package_path="/maplibre", # Correct import path
)
}
map_libre = MapLibreMap.create
Expected behavior
Either:
Allow library = "react-map-gl/maplibre" and split on / to extract base package for npm (react-map-gl) while using full path for imports
Add a component-level package_path attribute to prevent bare imports when the component library uses subpaths
Screenshots
Describe the bug
When wrapping a React component that must be imported from a package subpath (e.g., react-map-gl/maplibre), there's no way to specify the subpath for the main library attribute. The library attribute only accepts a package name for npm installation, not a subpath.
If you use ImportVar with package_path to import from the correct subpath, the import system still generates an additional bare import from the main library attribute, which fails when the package doesn't export from its root.
To Reproduce
Try this component
Expected behavior
Either:
Allow library = "react-map-gl/maplibre" and split on / to extract base package for npm (react-map-gl) while using full path for imports
Add a component-level package_path attribute to prevent bare imports when the component library uses subpaths
Screenshots
