keyboardio
Chrysalis needs to handle cases when loading keymaps from json that don't have the right # of layers.
Describe the bug
I exported a layout from the web version of the app and tried to import it again.
On selection of the file the site goes white and in the console it says
Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Obviously that error is not very useful so I ran the app on my local machine to get a nicer react error:
Warning: React has detected a change in the order of Hooks called by Overview. 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. useContext useContext
2. useState useState
3. useRef useRef
4. useEffect useEffect
5. useRef useRef
6. useEffect useEffect
7. useRef useRef
8. useEffect useEffect
9. useState useState
10. useEffect useEffect
11. useState useState
12. useState useState
13. useState useState
14. useState useState
15. useState useState
16. useState useState
17. useState useState
18. useState useState
19. useState useState
20. undefined useState
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
at Overview (http://localhost:8080/main.bundle.js:81184:40)
at div
at http://localhost:8080/main.bundle.js:828:66
at Box (http://localhost:8080/main.bundle.js:60536:72)
at Editor (http://localhost:8080/main.bundle.js:84017:40)
at div
at FocusHandlerImpl (http://localhost:8080/main.bundle.js:2836:5)
at FocusHandler (http://localhost:8080/main.bundle.js:2807:19)
at RouterImpl (http://localhost:8080/main.bundle.js:2712:5)
at Location (http://localhost:8080/main.bundle.js:2541:23)
...
Uncaught Error: Rendered more hooks than during the previous render.
at updateWorkInProgressHook (react-dom.development.js:16507:1)
at updateReducer (react-dom.development.js:16568:1)
at updateState (react-dom.development.js:17004:1)
at Object.useState (react-dom.development.js:17915:1)
at useState (react.development.js:1622:1)
at HamburgerMenu (Overview.js:79:45)
at Overview.js:173:12
at Array.map (<anonymous>)
at Overview (Overview.js:129:29)
at renderWithHooks (react-dom.development.js:16305:1)
...
The above error occurred in the <Overview> component:
at Overview (http://localhost:8080/main.bundle.js:81184:40)
at div
at http://localhost:8080/main.bundle.js:828:66
at Box (http://localhost:8080/main.bundle.js:60536:72)
at Editor (http://localhost:8080/main.bundle.js:84017:40)
at div
at FocusHandlerImpl (http://localhost:8080/main.bundle.js:2836:5)
at FocusHandler (http://localhost:8080/main.bundle.js:2807:19)
at RouterImpl (http://localhost:8080/main.bundle.js:2712:5)
at Location (http://localhost:8080/main.bundle.js:2541:23)
at Router
at main
...
Uncaught Error: Rendered more hooks than during the previous render.
at updateWorkInProgressHook (react-dom.development.js:16507:1)
at updateReducer (react-dom.development.js:16568:1)
at updateState (react-dom.development.js:17004:1)
at Object.useState (react-dom.development.js:17915:1)
at useState (react.development.js:1622:1)
at HamburgerMenu (Overview.js:79:45)
at Overview.js:173:12
at Array.map (<anonymous>)
at Overview (Overview.js:129:29)
at renderWithHooks (react-dom.development.js:16305:1)
...
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
The above error occurred in the <LocationProvider> component:
at LocationProvider (http://localhost:8080/main.bundle.js:2561:5)
at div
at http://localhost:8080/main.bundle.js:828:66
at Box (http://localhost:8080/main.bundle.js:60536:72)
at div
at DndProvider (http://localhost:8080/main.bundle.js:196535:11)
at ThemeProvider (http://localhost:8080/main.bundle.js:57946:5)
at ThemeProvider (http://localhost:8080/main.bundle.js:59028:5)
at ThemeProvider (http://localhost:8080/main.bundle.js:55115:14)
at StyledEngineProvider (http://localhost:8080/main.bundle.js:58129:5)
at Suspense
at App (http://localhost:8080/main.bundle.js:76119:40)
at GlobalContextProvider (http://localhost:8080/main.bundle.js:76747:49)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Uncaught Error: Rendered more hooks than during the previous render.
at updateWorkInProgressHook (react-dom.development.js:16507:1)
at updateReducer (react-dom.development.js:16568:1)
at updateState (react-dom.development.js:17004:1)
at Object.useState (react-dom.development.js:17915:1)
at useState (react.development.js:1622:1)
at HamburgerMenu (Overview.js:79:45)
at Overview.js:173:12
at Array.map (<anonymous>)
at Overview (Overview.js:129:29)
at renderWithHooks (react-dom.development.js:16305:1)
I haven't worked with react yet, this doesn't look very useful to me but is most likely more useful than the other error.
To Reproduce Steps to reproduce the behavior:
- Connect a Keyboardio Atreus with the latest firmware
- Click on "Backup and Restore layouts"
- Click on "Restore from File..." and select the JSON from above
- Now the page should be white and an error should be displayed in the console
Expected behavior No error occurs and layout gets imported correctly.
Screenshots
The error on https://chrysalis.keyboard.io
Interestingly the layout seems to load and the error occurs afterwards
Heres is the debug file from the "Report a problem" page: debug.txt
Unfortunately, the web based version isn't backwards compatible with the old desktop version.
On Thu, Aug 15, 2024 at 11:06 AM Oscar Schwarz @.***> wrote:
Describe the bug I exported a layout https://github.com/user-attachments/files/16628254/Chrysalis_Keyboardio-Atreus_layout_2024-08-15_19-19-02.json from the web version of the app and imported it into the desktop version. After trying to save the layout I get TypeError: Cannot read properties of undefined (reading 'length') After reconnecting to the keyboard the layout is scrambled on some layers.
To Reproduce Steps to reproduce the behavior:
- Connect a Keyboardio Atreus with the latest firmware
- Click on "Backup and Restore"
- Click on "Load from File..." and select the JSON from above
- Click on "Import"
- In the Layout Editor try to save
- Now the error should be displayed
Expected behavior No error occurs and layout gets saved correctly.
Screenshots chrysalis-debug.json.txt https://github.com/user-attachments/files/16628449/chrysalis-debug.json.txt
Desktop (please complete the following information):
- OS: Linux
- Chrysalis Version: 0.13.3
— Reply to this email directly, view it on GitHub https://github.com/keyboardio/Chrysalis/issues/1346, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAALC2CQXKSTK77HQXLJYV3ZRTU2TAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ3DQNRSGYYDSMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>
I see. The only reason I tried the desktop version was because on the web version the import fails too. I will edit this report later so it resembles the web bug.
Sure thing. That should absolutely work. The debug log from the web import attempt would be very helpful.
Best, Jesse
I managed to repair my layout json by comparing it to a similar working file export. Heres the diff. It seems the structure of the last layer was messed up. But that it the applications fault. I havent messed with that file. But I have no idea how to reproduce that wrong export behaviour.
That looks like it was missing a layer. Do you happen to know what firmware revision you were coming from?
On Fri, Aug 16, 2024 at 3:35 AM Oscar Schwarz @.***> wrote:
I managed to repair my layout json by comparing it to a similar working file export. Heres the diff https://github.com/user-attachments/files/16636151/repair_layout.txt. It seems the structure of the last layer was messed up. But that it the applications fault. I havent messed with that file. But I have no idea how to reproduce that wrong export behaviour.
— Reply to this email directly, view it on GitHub https://github.com/keyboardio/Chrysalis/issues/1346#issuecomment-2293264764, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAALC2ENEPYKKZEEXTGOPXLZRXIYHAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGI3DINZWGQ . You are receiving this because you commented.Message ID: @.***>
Sadly not. But I know it was a version without mouse and macro support and layer 8 and 9 were greyed out in Chrysalis.
Interesting! I don't think we ever shipped an 'official' firmware without mouse support. But that gives me an idea of what might be causing the problem. I'll retitle this bug, but it sounds like Chrysalis isn't robust enough when loading keymaps that don't have enough layers.
On Fri, Aug 16, 2024 at 9:42 AM Oscar Schwarz @.***> wrote:
Sadly not. But I know it was a version without mouse and macro support and layer 8 and 9 were greyed out in Chrysalis.
— Reply to this email directly, view it on GitHub https://github.com/keyboardio/Chrysalis/issues/1346#issuecomment-2293826024, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAALC2EBU33BUSTL5G3RJWTZRYTZFAVCNFSM6AAAAABMSUVZCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTHAZDMMBSGQ . You are receiving this because you commented.Message ID: @.***>