gatsby: Gatsby 2.0 RC | Styled components theme crashes prod build
Description
When using the <ThemeProvider>, everything works as expected in development. When building for production, an error occurs.
Steps to reproduce
Use a <ThemeProvider> and in a component, use theme values, such as ${props => props.theme.colors.green}. See that it works in development when running gatsby develop but crashes when running gatsby build.
Expected result
The prod build should complete successfully.
Actual result
error Building static HTML for pages failed
3 |
4 | const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
> 5 | color: ${props => props.theme.colors.green};
| ^
6 | margin-right: 15px;
7 | `
8 |
WebpackError: TypeError: Cannot read property ‘green’ of undefined
Environment
System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Shell: 5.3 - /bin/zsh Binaries: Node: 10.4.0 - /usr/local/bin/node Yarn: 1.7.0 - /usr/local/bin/yarn npm: 6.1.0 - /usr/local/bin/npm Browsers: Chrome: 68.0.3440.106 Firefox: 61.0.1 Safari: 11.1.2 npmPackages: gatsby: ^2.0.0-rc.7 => 2.0.0-rc.7 gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 gatsby-plugin-styled-components: ^3.0.0-rc.1 => 3.0.0-rc.1 npmGlobalPackages: gatsby-cli: 2.0.0-rc.1
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 29 (11 by maintainers)
You also have to use the wrapPage thingy in
gatsby-ssr.js@DSchau I am new to gatsby and I’ve looked at your example: https://github.com/DSchau/gatsby-7827 I just wonder why can’t we use the gatsby-browser API and its
wrapRootElementto wrap all the app with ThemeProvider 🤔. In your example the ThemeProvider will unmount and remount at each page change. I thoughtwrapRootElementwas meant to be used with providers. That’s what I am doing here https://github.com/sylvhama/shamann-gatsby but the build fails.@thibautvs the main issue that’s happening in your example is that
src/pages/index/StyledFontAwesomeIcon.jsis being treated as a page component, and is not being wrapped with the special Layout component. This is leading the component to be rendered during SSR without a ThemeProvider, thus, the error thatthemeis not defined.I’d recommend that if you have React components that are just that (components!) instead of pages, that you create a
src/componentsdirectory, and place components in that directory. Then those components can be imported into page components like one would expect.Here’s the fix for the reproduction -> https://github.com/thibautvs/gatsby-theme-crash/pull/1
@Vpr99 I can’t fix your problem without a reproduction, unless it’s a similar one to the one in this case. We’ve shown that it works with a recommended setup here so unless you can provide a separate reproduction of your issue, can’t help much yet! Please do let us know if we can help further.
This addition to
gatsby-ssr.jsshould really be documented in thegatsby-plugin-styled-componentsREADME as it essentially means that the plugin is broken out of the box (gatsby buildfails if using themes).Ok I omited to setup
gatsby-ssr.jswhich should contain wrapRootElement as well. The Behind the scenes doc explains why we must do that: https://www.gatsbyjs.org/docs/webpack-and-ssr/Sorry, didn’t mean to imply that the plugin itself is broken. It does require an extra step of configuration in order to work that I did not see documented in the plugin. Specifically, the code that needs to be added to
gatsby-ssr.jsthat @sylvhama linked to. I think including example code forgatsby-ssr.jsin the README would be very helpful.The plugin isn’t broken nor not working with themes. There’s something wrong on your end. Can you share a reproduction repo?
Thanks very much for your explanation and fix @DSchau!
Hi @kakadiadarpan,
Sure! Pretty busy these days but I’ll try to find some time to put a sample project together.