Discussion on: Gatsby theme shadowing for beginners: How I built a starter for LekoArts’ Minimal Blog theme

[sid-r-singh]

Hi there, I tried this but soon I ran into errors.
Here is what I wanted to achieve. I wanted to modify the Layout.js available here.
The modification I wanted is:
In line 47 you see the <Switcher /> getting rendered. But in my website, I wanted the Switcher to be removed. So this is what I wrote in my Layout.js

import React, { useLayoutEffect } from 'react';
import Layout from 'gatsby-theme-carbon/src/components/Layout';
const customLayout = (props) => {
  const is404 = children.key === null;

  useLayoutEffect(() => {
    // eslint-disable-next-line global-require
    const scroll = require('smooth-scroll')('a[href*="#"]', {
      speed: 400,
      durationMin: 250,
      durationMax: 700,
      easing: 'easeInOutCubic',
      clip: true,
      offset: tabs ? 112 : 64,
    });
    return scroll.destroy;
  }, [tabs]);

  return (
    <>
      <Meta
        titleType={titleType}
        pageTitle={pageTitle}
        pageDescription={pageDescription}
        pageKeywords={pageKeywords}
      />
      <Header />
      <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
      <Container homepage={homepage} theme={theme}>
        {children}
        <Footer />
      </Container>
    </>
  );
};
export default customLayout;

This is the error that I am getting:

   4:17  error    'children' is not defined                                                                                                                                                                                                           no-undef
   6:3   error    React Hook "useLayoutEffect" is called in function "customLayout" which is neither a React function component or a custom React Hook function                                                                                       react-hooks/rules-of-hooks
  14:15  error    'tabs' is not defined                                                                                                                                                                                                               no-undef
  17:6   warning  React Hook useLayoutEffect has an unnecessary dependency: 'tabs'. Either exclude it or remove the dependency array. Outer scope values like 'tabs' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
  17:7   error    'tabs' is not defined                                                                                                                                                                                                               no-undef
  21:8   error    'Meta' is not defined                                                                                                                                                                                                               react/jsx-no-undef
  22:20  error    'titleType' is not defined                                                                                                                                                                                                          no-undef
  23:20  error    'pageTitle' is not defined                                                                                                                                                                                                          no-undef
  24:26  error    'pageDescription' is not defined                                                                                                                                                                                                    no-undef
  25:23  error    'pageKeywords' is not defined                                                                                                                                                                                                       no-undef
  27:8   error    'Header' is not defined                                                                                                                                                                                                             react/jsx-no-undef
  28:8   error    'LeftNav' is not defined                                                                                                                                                                                                            react/jsx-no-undef
  28:26  error    'homepage' is not defined                                                                                                                                                                                                           no-undef
  28:61  error    'theme' is not defined                                                                                                                                                                                                              no-undef
  29:8   error    'Container' is not defined                                                                                                                                                                                                          react/jsx-no-undef
  29:28  error    'homepage' is not defined                                                                                                                                                                                                           no-undef
  29:45  error    'theme' is not defined                                                                                                                                                                                                              no-undef
  30:10  error    'children' is not defined                                                                                                                                                                                                           no-undef
  31:10  error    'Footer' is not defined