Error with example from Getting Started
See original GitHub issueWhat:
I am getting different unexpected behaviours depending on the order in which the areas*
attributes are specified and which names occur in them.
Why:
No clue, should I be using a different atomic-layout
version? Is the getting started guide outdated?
Environment:
- node version:
11.7.0
- npm version:
6.9.0
- atomic-layout version:
0.8.0
Steps to reproduce:
Steps to reproduce the behavior.
Consider the following program (slightly adapted from https://redd.gitbook.io/atomic-layout/general/getting-started/workflow by adding areasSm
explicitly).
let areas = `
header
content
aside
footer
`
let areasMobile = `
header
content
aside
footer
`
let areasTablet = `
header header
content aside
footer footer
`
import {Composition} from 'atomic-layout';
const Page = () => (
<Composition
areas={areas}
areasMd={areasTablet}
areasSm={areasMobile}
>{({ Header, Content, Aside, Footer }) => (
<>
<Header>Header</Header>
<Content>Content</Content>
<Aside>Aside</Aside>
<Footer>Footer</Footer>
</>
)}
</Composition>
)
If I remove aside
from areasMobile
, I get the following issue in the console:
react.development.js:88 Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at invariant (http://localhost:1234/main.65f60760.js:26042:19)
at resolveDispatcher (http://localhost:1234/main.65f60760.js:27427:32)
at Object.useMemo (http://localhost:1234/main.65f60760.js:27481:24)
at MediaQuery (http://localhost:1234/main.65f60760.js:56027:41)
at renderWithHooks (http://localhost:1234/main.65f60760.js:16822:22)
at mountIndeterminateComponent (http://localhost:1234/main.65f60760.js:18978:17)
at beginWork (http://localhost:1234/main.65f60760.js:19611:20)
at performUnitOfWork (http://localhost:1234/main.65f60760.js:23652:16)
at workLoop (http://localhost:1234/main.65f60760.js:23693:28)
at HTMLUnknownElement.callCallback (http://localhost:1234/main.65f60760.js:3520:18)
Expected behavior:
Do not show the aside
component on a small screen.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
The 7 Most Common Types of Errors in Programming and ...
Resource errors are an example of a type of error in programming that might be something for the operations team to fix rather...
Read more >Error running example B1 - Getting Started - Geant4 Forum
I am brand new to Geant4. Attempting to run example B1 run1.mac results in a fatal exception and core dump with the following...
Read more >Error encountered when running Heroku Node.js getting ...
I have been faithfully following the excellent example on getting started with Heroku and Node.js. Up until the database section. I have :....
Read more >How To Troubleshoot Common HTTP Error Codes
This guide focuses on identifying and troubleshooting the most commonly encountered HTTP error codes, i.e. 4xx and 5xx status codes, ...
Read more >Error in manifest.json in the Getting Started Example #116
Describe the bug. The extension does not load properly with the manifest provided. I would expect the assignment to load, but instead it ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I did as you said and hereby confirm the “Bugfixes > Hooks error” story seems to work:
The error in the console appears as the storybook sidebar disappears and seems unrelated
@wires neat pick on the story book error 👍
Layout options exception should be fixed, but perhaps I forgot to issue a patch release. Will do right now. I’m glad that the issue is resolved. My bet would be on react and react-dom versions mismatch for whatever reason. If hooks usage is improper it would fail a significant portion of the CI and be spotted.
Please let me know in case you experience anything else unexpected, or feel that some aspects need more guidance. I’m always eager to help. You rock.