Gatsby + ThemeProvider StyledComponents имеет пустую тему

Question

Я впервые пробую Гэтсби. Я настроил свой локальный dev env, как обычно, без Gatsby, с <ThemeProvider />, обертывающим приложение из компонента root. Это прекрасно работает ... пока я не попытаюсь запустить команду, чтобы подготовить мое приложение к работе и обслуживать gatsby build. Затем я получаю сообщение об ошибке:

WebpackError: TypeError: Невозможно прочитать свойство 'blue1' из неопределенного

После дополнительного чтения мне говорят использовать gatsby-ssr.js и gatsby-browser.js файлы с wrapRootElement() API. Теперь это происходит локально с той же ошибкой, что и при попытке запустить сценарий производственной сборки выше.

Почему мой ThemeProviderProps еще пуст? Мне не нужно было оборачивать каждый компонент в макете.

---

• пакет. json

"dependencies": {
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.17.4",
    "gatsby-plugin-react-helmet": "^3.1.15",
    "gatsby-plugin-styled-components": "^3.1.11",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1",
    "react-inlinesvg": "^1.2.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@types/react-helmet": "^5.0.14",
    "@types/styled-components": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "eslint": "^6.8.0",
    "gatsby-plugin-tslint": "0.0.2",
    "gatsby-plugin-typescript": "^2.1.15",
    "gh-pages": "^2.1.1",
    "tslint": "^5.20.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.4"
  }

---

Затем файлы должны быть готовы gatsby-config:

• gatsby-ssr. js
• gatsby-browser. js

import { wrapRootElement as wrap } from "./root-wrapper";

export const wrapRootElement = wrap;

---

• gatbsy-config. js

module.exports = {
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-tslint`,
    `gatsby-plugin-react-helmet`
  ]
};

---

• root -обертка. js

export const wrapRootElement: FC<Props> = ({ element }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global />
      <Layout>{element}</Layout>
    </ThemeProvider>
  );
};

---

• src / components / Layout.tsx

    const Layout: FC = ({ children }) => {
      return (
        <>
          <Helmet>
            ...
          </Helmet>
          <>{children}</>
        </>
      );
    };

---

• src / pages / index.tsx

export default (props: any) => <Home  />;

Итак когда я помещаю отладчик в компоненты Global или Home, тема становится пустым объектом {}.

Что происходит для локальной разработки, чтобы сделать тему пустой?