"Undefined mixin" or variable error - the mixin and variables erroring are defined correctly.

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

When the app started transpiling, an error is presented stating that there is an Undefined mixin. or sometimes a sass variable. However, if you refresh the page, the app loads correctly with no problems.

How has this issue affected you? What are you trying to accomplish?

People are not able to load and see/play with the app when they first open the project. They can only see/play with the app if they refresh the page.

To Reproduce

Some times it works but the majority of the time, it fails. See video below:
https://www.loom.com/share/449d0526d4cf437fad1ae71130511a24

Link to sandbox: link

Your Environment

Start with the CodeSandbox reproduction, especially src/index.js lines 83-114, and compare the initial transpilation path with a successful refresh. Trace why the defined SCSS mixin or variable is unavailable during the first load; done means the app loads reliably without either undefined error.