box-ui-elements
box-ui-elements copied to clipboard
Fails to build with react-scripts 3.3.0
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Note: if your issue includes a potential security vulnerability, please do not file it here. Instead, email the issue to [email protected] for support.
Note: if your issue involves previewing files, please report the issue here.
Environment:
- Elements version:
Desktop (please complete the following information):
- OS: OSX and Ubuntu Container
Steps to reproduce the problem:
react-scripts build
with react-scripts 3.30
What is the expected behavior? (Screenshots can be helpful here) Builds without warnings
What went wrong? (Screenshots, console logs, or HAR files can be helpful here) chunk 0 [mini-css-extract-plugin] Conflicting order between:
- css ../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../node_modules/postcss-loader/src??postcss!../node_modules/resolve-url-loader??ref--6-oneOf-5-3!../node_modules/sass-loader/dist/cjs.js??re f--6-oneOf-5-4!../node_modules/box-ui-elements/es/components/scroll-wrapper/ScrollWrapper.scss
- css ../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../node_modules/postcss-loader/src??postcss!../node_modules/resolve-url-loader??ref--6-oneOf-5-3!../node_modules/sass-loader/dist/cjs.js??re f--6-oneOf-5-4!../node_modules/box-ui-elements/es/components/flyout/Flyout.scss
chunk 0 [mini-css-extract-plugin] Conflicting order between:
- css ../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../node_modules/postcss-loader/src??postcss!../node_modules/resolve-url-loader??ref--6-oneOf-5-3!../node_modules/sass-loader/dist/cjs.js??re f--6-oneOf-5-4!../node_modules/box-ui-elements/es/components/selector-dropdown/SelectorDropdown.scss
- css ../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!../node_modules/postcss-loader/src??postcss!../node_modules/resolve-url-loader??ref--6-oneOf-5-3!../node_modules/sass-loader/dist/cjs.js??re f--6-oneOf-5-4!../node_modules/box-ui-elements/es/components/flyout/Flyout.scss
Looks like others are having this issue as well https://github.com/facebook/create-react-app/issues/5372#issuecomment-505985237
Having the same warnings with the same scss files
We were able to resolve this issue on react-scripts 3.4.0 by importing the specific scss files that are causing the issue into the js file that contains the box ui element. For us the scss files that we needed to import were:
import "box-ui-elements/es/components/scroll-wrapper/ScrollWrapper.scss"; import 'box-ui-elements/es/components/flyout/Flyout.scss';
node sass is deprecated. this is still an issue that pops up from time to time depending on the system and version of node and/or npm. i wish this package just shipped with prebuilt styles.
running into this again. and vercel doesn't build either.