queryAdapter(createBrowserHistory()) throws Invalid URL on normal browser URL

[mollehxh]

What is the current behavior?

queryAdapter(createBrowserHistory()) throws immediately when initialized on a normal browser URL without a search string.

Reproduction: https://codesandbox.io/p/sandbox/yd76fy

The app crashes on this line:

modalRouter.setHistory(queryAdapter(browserHistory));

Error:

TypeError: Failed to construct 'URL': Invalid URL

Minimal reproduction:

import {
  createRoute,
  createRouter,
  historyAdapter,
  queryAdapter,
} from "@effector/router";
import { createBrowserHistory } from "history";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

const browserHistory = createBrowserHistory();

const usersRoute = createRoute({ path: "/users" });

const mainRouter = createRouter({
  routes: [usersRoute],
});

mainRouter.setHistory(historyAdapter(browserHistory));

const userModalRoute = createRoute({ path: "/user/:id" });

const modalRouter = createRouter({
  routes: [userModalRoute],
});

modalRouter.setHistory(queryAdapter(browserHistory));

userModalRoute.$isOpened.watch((value) => {
  console.log("userModalRoute.$isOpened", value);
});

userModalRoute.$params.watch((value) => {
  console.log("userModalRoute.$params", value);
});

userModalRoute.open({
  params: {
    id: "1",
  },
});

const rootElement = document.getElementById("root");

if (!rootElement) {
  throw new Error("Root element not found");
}

createRoot(rootElement).render(<StrictMode />);

Please provide the steps to reproduce and if possible a minimal demo of the problem via https://share.effector.dev/, https://codesandbox.io/ or similar

1. Open the reproduction: https://codesandbox.io/p/sandbox/yd76fy
2. The app crashes immediately.
3. The error points to modalRouter.setHistory(queryAdapter(browserHistory)).

What is the expected behavior?

queryAdapter(createBrowserHistory()) should initialize without throwing on a normal browser URL.

I expected the modal router to initialize in a closed/default state and then open the modal route when calling:

userModalRoute.open({
  params: {
    id: "1",
  },
});

Based on the documentation, queryAdapter is intended for modal routing / secondary navigation, where the main URL stays the same and the modal route is stored in query parameters.

Which versions of effector packages, and which browser and OS are affected by this issue? Did this work in previous versions of effector?

@effector/router: 1.0.0-rc.0
@effector/router-react: 1.0.0-rc.0
effector: 23.4.4
effector-react: 23.3.0
history: 5.3.0
react: 18.2.0
react-dom: 18.2.0

Browser: Google Chrome
OS: macOS
Environment: CodeSandbox React TypeScript