Error with example from Getting Started

What:

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.

[wires]

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

[kettanaito]

@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.