Entire application crashes when refactoring exercises

[zacjones93]

Versions

• @kentcdodds/react-workshop-app version: ^2.12.0
• node version: v10.18.1
• npm version: 6.13.4

What you did:

This happens on occasion but when you write code that isn't valid and React crashes (as expected), the instructions also disappear in the app.

While you can look at the markdown file that is sitting next to the exercise.js file, it would be a much nicer workflow to have the instructions still present.

More specifically, in Exercise 04 in the React Hooks workshop, we are instructed to lift state from the Board component to the Game Component with some suggested JSX that you give us in the instructions.

A natural first step for me was to paste that JSX into the Game component so I can work with the variables that are being passed to the various components.

What happened:

The whole app crashes! Again, I did expect this but would still like to reference the instructions that were given

Suggested solution:

I expect that an ErrorBoundary around the exerciseElement would do the trick but would like your input on this or if I'm even thinking about this in the right way. 😄

Relevant Code:

<React.Suspense
  fallback={
    <div
      // this centers the loading with the loading
      // for the instructions
      css={[
        totallyCenteredStyles,
        mq({marginBottom: ['auto', 'auto', 80]}),
      ]}
    >
      Loading...
    </div>
  }
>
  <div
    className="exercise-container render-container"
    css={mq({paddingBottom: [0, 0, '2rem']})}
  >
    {exerciseElement}
  </div>
</React.Suspense>

[kentcdodds]

I agree. Unfortunately this is the ErrorOverlay. It's only available during development. It's a feature of create-react-app. It's actually quite useful normally, but yeah, kinda annoying most of the time. What's worse is even with an error boundary it still shows up. However, we can add CSS to hide the iframe. I do that on some lessons, but we could probably do it for all of them.

[zacjones93]

It could make sense to hide the overlay for sections that have X number or more of Extra Credit exercises? 3?

If you could point me towards a lesson where you did that I'm willing to put in a PR for the other lessons!

[kentcdodds]

Here's one example: https://github.com/kentcdodds/react-hooks/blob/f9346258c209fd72ec1465df80b2d8982dc1ec5e/src/styles.css#L88-L91

But I think we'd be ok to just do this:

iframe {
  display: none;
}

[kentcdodds]

Could probably stick that here: https://github.com/kentcdodds/react-workshop-app/blob/master/other/workshop-app-styles.css

With a good comment and then be done with it.

[kentcdodds]

:tada: This issue has been resolved in version 2.12.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: