[Google Chrome] The "New Tab" command crashes upon the first start or when a new profile is added.

[nagauta]

Extension

https://www.raycast.com/Codely/google-chrome

Description

overview

The "New Tab" command crashes upon the first start or when a new profile is added.

hypothesis

I suspect this bug is related to the implementation found here, potentially violating React's rules of hooks under specific conditions:

case1

Initially, the profile count is 0. After loading, the count increases, as seen here. UseSQL, which incorporates hooks, is then executed repeatedly.

case2

Upon adding a new profile, the initial rendering shows more than one profile. The profile count continues to increase after loading, as mentioned above. Again, UseSQL is executed in a loop, causing potential issues.

about error output

there's error outputted in terminal below.

Warning: React has detected a change in the order of Hooks called by Command. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useRef                     useRef
3. useRef                     useRef
4. useSyncExternalStore       useSyncExternalStore
5. useMemo                    useMemo
6. useRef                     useRef
7. useCallback                useCallback
8. useRef                     useRef
9. useRef                     useRef
10. useSyncExternalStore      useSyncExternalStore
11. useMemo                   useMemo
12. useRef                    useRef
13. useCallback               useCallback
14. useState                  useState
15. useState                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at Command (/Users/myano/.config/raycast/extensions/google-chrome/new-tab.js:7366:66)
    at Dr (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:2490)
    at ray-navigation-stack
    at Lo (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:2088)
    at Suspense
    at Or (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:10:1022)
    at ray-root
    at Bi (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:3000)
00:52:39.091 The above error occurred in the <Command> component:

    at Command (/Users/myano/.config/raycast/extensions/google-chrome/new-tab.js:7366:66)
    at Dr (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:2490)
    at ray-navigation-stack
    at Lo (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:2088)
    at Suspense
    at Or (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:10:1022)
    at ray-root
    at Bi (/Applications/Raycast.app/Contents/Resources/RaycastCommands_RaycastCommands.bundle/Contents/Resources/api/node_modules/@raycast/api/index.js:11:3000)

React will try to recreate this component tree from scratch using the error boundary you provided, InternalErrorBoundary.
00:52:39.123 
TypeError: Cannot create property 'current' on boolean 'true'

Command:new-tab.tsx:24:55

---
21: }
22: 
23: export default function Command() {
24:   const [searchText, setSearchText] = useState<string>();
25:   const [profiles] = useCachedState<ChromeProfile[]>(CHROME_PROFILES_KEY);
26:   const [profile] = useCachedState(CHROME_PROFILE_KEY, DEFAULT_CHROME_PROFILE_ID);
27:   const profileHistories = profiles?.map((p) => ({ ...useHistorySearch(p.id, searchText), profile: p }));
---

Dr:index.js:11:2490
    at ray-navigation-stack
Lo:index.js:11:2088

Steps To Reproduce

Pattern A:

1. Install Google Chrome Extension
2. Excute "New Tab" command

Pattern B:

1. add a new profile on Google Chrome
2. Excute "New Tab" command

Current Behaviour

Expected Behaviour

[raycastbot]

Thank you for opening this issue!

🔔 @rgomezcasas @bromanko @crisboarna @andreaselia @rtyke @karolre @Aiee @a-laughlin @tleo19 you might want to have a look.

💡 Author and Contributors commands

The author and contributors of `Codely/google-chrome` can trigger bot actions by commenting: - `@raycastbot close this issue` Closes the issue. - `@raycastbot rename this issue to "Awesome new title"` Renames the issue. - `@raycastbot reopen this issue` Reopen the issue.

[nagauta]

This will happen with other browser extensions like MS Edge, as they use Chromium.

[raycastbot]

This issue has been automatically marked as stale because it did not have any recent activity.

It will be closed if no further activity occurs in the next 10 days to keep our backlog clean 😊

[raycastbot]

This issue has been automatically closed due to inactivity.

Feel free to comment in the thread when you're ready to continue working on it 🙂

You can also catch us in Slack if you want to discuss this.