Subscribe on changes!

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

avatar
Jan 28th 2021

Version

3.0.5

Reproduction link

https://admin-tmpl.rencaiyoujia.com

Steps to reproduce

step 1:change language en then click login button

step2: click Charts

step3: click barcharts

step4: click linecharts

What is expected?

vue-router can push normally

What is actually happening?

router push stop on current page

warning:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

error :

Uncaught (in promise) DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.


local operation is normal,build deploy error.

github repository : https://github.com/rcyj-FED/vue3-composition-admin

Can't find out the reason, hope to get help. Thanks very much.

avatar
Jan 28th 2021

see #2999

avatar
Jan 28th 2021

Please provide minimal repro

avatar
Jan 28th 2021

I debugged your project and found that the warning was generated because value is the window when traverse

function traverse(value: unknown, seen: Set<unknown> = new Set()) {
  if (!isObject(value) || seen.has(value)) {
    return value
  }
  seen.add(value)
  if (isRef(value)) {
    traverse(value.value, seen)
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      traverse(value[i], seen)
    }
  } else if (isSet(value) || isMap(value)) {
    value.forEach((v: any) => {
      traverse(v, seen)
    })
  } else {
    for (const key in value) {
      traverse(value[key], seen)
    }
  }
  return value
}

When we traverse all the properties on the window, a warning occurs

image

see https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

The route object is a reactive object, so any of its properties can be watched and you should avoid watching the whole route object:

as a workround. change your code as below when you need watch route:

  const currentRoute = useRoute()
  const watchRouter = watch(() => currentRoute.name, () => {
    if (store.state.app.device === DeviceType.Mobile && store.state.app.sidebar.opened) {
      store.dispatch(AppActionTypes.ACTION_CLOSE_SIDEBAR, false)
    }
  })

It will works fine.

and I didn’t figure out why there was no problem with DEV