Stimulus控制器报错：Failed to construct 'URL': Invalid URL 求助

核心错误原因 #

Failed to construct 'URL': Invalid URL 报错的根源是：URL 构造函数要求传入带协议、域名的绝对URL，但你传入的是相对路径 /scheduleevents/select，不符合构造函数的参数规范。

解决方案（三种任选其一） #

方案1：在Stimulus控制器中拼接绝对URL #

修改 remote_select_controller.js 的 update 方法，用当前页面的域名补全绝对路径：

update() {
  console.log(this.urlValue);
  // 基于当前页面域名拼接完整URL
  const url = new URL(this.urlValue, window.location.origin);
  
  url.searchParams.append(this.nameValue, this.element.value);

  Turbo.visit(url, { action: "replace" });
}

方案2：在Rails视图中直接生成绝对路径 #

把视图里的 scheduleevents_select_path 替换为 scheduleevents_select_url——Rails中_url后缀的路由助手会生成带域名的绝对URL，_path仅生成相对路径：

<select data-controller="remote-select" 
        data-remote-select-url-value="<%= scheduleevents_select_url %>" 
        data-remote-select-name-value="form[occurrence]" 
        data-action="change->remote-select#update">
        <% Scheduleevent.occurrences.each do |occurrence| %>
          <option value="<%= occurrence.second %>"><%= occurrence.first %></option>
        <% end %>
</select>

方案3：直接拼接相对路径与查询参数 #

如果不需要用URL对象处理参数，可以直接拼接字符串跳过构造函数：

update() {
  const params = new URLSearchParams();
  params.append(this.nameValue, this.element.value);
  Turbo.visit(`${this.urlValue}?${params.toString()}`, { action: "replace" });
}

额外注意事项 #

1. 确保局部视图存在：比如如果params[:form][:occurrence]的值是weekly，则app/views/scheduleevents/目录下必须有_weekly.html.erb文件，否则会触发渲染错误。
2. 清理冗余代码：Stimulus控制器connect方法里重复设置data-action的代码可以删除，视图中已经定义了该属性。
3. 验证路由：运行rails routes确认scheduleevents/select路由确实指向scheduleevents#select动作。

内容的提问来源于stack exchange，提问作者spacerobot