Terra-core: Terra-mixins import in StatusView.scss causes build to fail

[ChaseSinclair]

Issue Description

Terra-mixins import in StatusView.scss sporadically fails to build. Deleting node_modules and re-installing resolves the issue, however this takes a long time. This happens several times a day and has been reported by multiple people.

Issue Type

• [ ] New Feature
• [ ] Enhancement
• [X] Bug
• [ ] Other

Expected Behavior

The terra-mixins import in StatusView.scss does not cause the build to fail.

Current Behavior

Build will sporadically fail with the following:

ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./node_modules/terra-status-view/lib/StatusView.scss Module build failed: @import ‘~terra-mixins’;

Steps to Reproduce

I have not determined the exact steps to reproduce, but it seems to occur more often when switching between running the app server, running storybook or running jest/wdio tests.

Environment

• Component Version: React 16
• Browser Name and Version: Chrome Version 66.0.3359.139
• Operating System and version (desktop or mobile): MacOS Sierra 10.12.6

[bjankord]

What sass dependencies / versions are you using?

[emilyrohrbough]

Are you using sass-loader v7?

[corymcdonald]

Think it could be a problem with the fact that we're referencing two different versions in the terra-status-view?
https://github.com/cerner/terra-core/blob/master/packages/terra-status-view/package.json

1.15.0 and 1.16.0?

[emilyrohrbough]

I don't think so. I was able to reproduce in terra-clinical with other components using the mixin while running package-level webdriver tests.

[AnthonyRoss]

@emilyrohrbough do you know of a workaround for this? We are currently experiencing this with one of our applications

[emilyrohrbough]

@AnthonyRoss I have not dug into the issue, I've just been able to speculate on the reason after seeing the errors after I bumped the loader to be the newest version.

[corymcdonald]

Our application is on v7 of sass-loader.

I think I tracked it down at least my issue. If you look at the sass-loader changelog you will see the following breaking change documented

The sass-loader throws an error at runtime now and refuses to compile if the peer dependency is wrong. This could break applications where npm's peer dependency warning was just ignored.

I downgraded Terra-Status-View to version 2.3.0. I was able to run yarn install and webpack-dev-server just fine. Then I upgraded to Terra-Status-View 2.4.0. This caused the File to import not found or unreadable: ~terra-mixins. error to appear.

Status-View 2.3.0 had the same terra-mixin version as a peerDependency
Status-View 2.4.0 introduced the different terra-mixin versions here

I'm going to submit a PR that will at least get these on the same version and maybe that can alleivate some of the issue. Albeit I don't know if this is the root cause, however it seemed to be one of them for me.

[AnthonyRoss]

I believe this issue is fixed with @CoryMcDonald Pull Request: https://github.com/cerner/terra-core/pull/1583 and if you upgrade sass-loader to 7.0.3: "sass-loader": "^7.0.3",

[mjhenkes]

Thanks @ChaseSinclair @CoryMcDonald @AnthonyRoss