-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styled-components and common layout breaks the build #11427
Comments
Thanks for reporting this issue.We are looking into it meanwhile you can use below mentioned snippet
|
if this answers your query feel free to close this issue |
@martinratinaud This is likely because during SSR on build, there's no Provider and hence no theme I'd recommend using wrapRootElement for the That should fix this |
@gagandeepp thanks but I'm pretty sure if the theme is empty, then it won't work either ? @sidharthachatterjee ok but I'm sorry if I don't understand Gatsby well yet but even with the docs I didn't find a relevant snippet. Can you help ? |
@martinratinaud you tagged the wrong gagandeep. Let me tag the correct one @gagandeepp |
@gagandeepp and @gagandeep Sorry about that :-) |
Hi there, so here is the solution thanks to @sidharthachatterjee. You have to add a
Thanks a lot for your help |
I'm using ThemeProvider and this does not work for me |
modified: gatsby-ssr.js Exporting wrapRootElement as per gatsbyjs/gatsby#11427 (comment) modified: src/components/header.js Adjusted the z-index so the header is above new file: src/components/withStyledIcon.jsx Added file to keep styling of contact social icons to remain consistent modified: src/hooks/useFetch.js Rewmoved dependencies - not needed. modified: src/pages/about.js modified: src/pages/contact.js Added links to email and social icons modified: src/pages/work.js Added graphql array of images to text object
Description
Hi there, I'm new to gatsby and find it pretty awesome but I stumble across this problem which I created a repo to reproduce
If I use a custom Layout to be used throughout my app, and use it in
./gatsby-browser.js
like soand with this in
./src/Layout.jsx
including a theme for styled-componentsWith this in my
src/pages/index.js
I get a
WebpackError: TypeError: Cannot read property 'mainDark' of undefined
ongatsby build
and no error when I
gatsby develop
I'm pretty sure I misunderstood something but can't find what!
Thanks for your help
Steps to reproduce
Expected result
Build should work
Actual result
Build fails with
WebpackError: TypeError: Cannot read property 'mainDark' of undefined
Environment
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.7.0 - ~/.nvm/versions/node/v11.7.0/bin/node
Yarn: 1.13.0 - ~/.nvm/versions/node/v11.7.0/bin/yarn
npm: 6.6.0 - ~/.nvm/versions/node/v11.7.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.104 => 2.0.104
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
npmGlobalPackages:
gatsby-cli: 2.4.8
The text was updated successfully, but these errors were encountered: