Gatsby: Having problem configuring tools to debug redux

[leognmotta]

Summary

Hey there, I tried to use Gatsby once, but now that I figured out more about Gatsby I made the decision to build my brand new app with Gatsby, but I am not getting success making the base of my app, I am having some trouble with redux setup.

First of all, I can make a redux setup, the problem is that we never use just Redux, we always need tools to help us debug redux during development, and for that, I decided to use Reactotron.

https://github.com/infinitered/reactotron

For the sake of simplicity, I will not provide the code here, but a small repository with my core base and a counter module sharing redux state between 2 pages.

https://github.com/leomotta121/gatsby-redux-example

Relevant information

Even though the redux works on gatsby-browser.js I am not being able to make my AppWrapper work on gatsby-ssr.js

I am getting an error saying that the window is undefined, which makes sense, I have already tried to check if the window exists, doing if (typeof window !== 'undefined') but the simple fact of importing Reactotron access the window, so I always get an error at this first line in src/config/ReactotronConfig.js

import Reactotron from 'reactotron-react-js'

How could I import this and make it accessible in the gatsby-browser and not trigger any Reactotron config in gatsby-ssr.js?

File contents (if changed)

gatsby-config.js:

module.exports = {
 siteMetadata: {
 title: `Gatsby Default Starter`,
 description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
 author: `@gatsbyjs`,
 },
 plugins: [
 `gatsby-plugin-react-helmet`,
 {
 resolve: `gatsby-source-filesystem`,
 options: {
 name: `images`,
 path: `${__dirname}/src/images`,
 },
 },
 `gatsby-transformer-sharp`,
 `gatsby-plugin-sharp`,
 {
 resolve: `gatsby-plugin-manifest`,
 options: {
 name: `gatsby-starter-default`,
 short_name: `starter`,
 start_url: `/`,
 background_color: `#663399`,
 theme_color: `#663399`,
 display: `minimal-ui`,
 icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
 },
 },
 {
 resolve: `gatsby-plugin-alias-imports`,
 options: {
 alias: {
 '@src': 'src',
 '@components': 'src/components',
 '@pages': 'src/pages',
 '@assets': 'src/assets',
 '@screens': 'src/screens',
 '@store': 'src/store',
 '@config': 'src/config',
 '@services': 'src/services',
 },
 extensions: ['js'],
 },
 },
 ],
}

gatsby-browser.js:

 export { default as wrapRootElement } from './src/components/AppWrapper'

gatsby-ssr.js:

 export { default as wrapRootElement } from './src/components/AppWrapper'

[leognmotta]

SOLVED!

My solution was to not use the module reactotron-react-js, but to make my own setting based on the package protecting the window call, I will let it open sourced for anyone that wants to use reactotron with Gatsby!

I will try to contribute to reactotron-react-js solving this problem.

My Gatsby base project includes: Redux-saga, Redux, Redux-persist, Reactotron for debugging and styled-components.

https://github.com/leomotta121/gatsby-redux-example

[carllippert]

@leomotta121 its like you listed off all the imports i was trying to manage for and i just copied and pasted your config and it worked. 🎉 Thnx

[leognmotta]

@leomotta121 its like you listed off all the imports i was trying to manage for and i just copied and pasted your config and it worked. Thnx

I am glad it helped someone!