Polaris-react: building with React 16

Created on 12 Oct 2017 · 7Comments · Source: Shopify/polaris-react

Issue summary

After upgrading to react16 i get multiple errors when compiling my project

ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./~/import-glob-loader!./frontend/dashboard/styles/editor.scss
Module build failed: 
@import "~@shopify/polaris/src/styles/foundation.scss";
^
      File to import not found or unreadable: ~@shopify/polaris/src/styles/foundation.scss.
Parent style sheet: stdin
      in /Users/davit/work/shogun-web/frontend/dashboard/styles/editor.scss (line 1, column 1)
 @ ./frontend/dashboard/styles/editor.scss 4:14-310
 @ ./frontend/packs/editor.jsx

ERROR in ./~/react-addons-transition-group/index.js
Module not found: Error: Can't resolve 'react/lib/ReactTransitionGroup' in '/Users/davit/work/shogun-web/node_modules/react-addons-transition-group'
 @ ./~/react-addons-transition-group/index.js 1:17-58
 @ ./~/@shopify/react-utilities/animation/TransitionGroup.js
 @ ./~/@shopify/react-utilities/animation/index.js
 @ ./~/@shopify/polaris/index.es.js
 @ ./frontend/dashboard/components/layout/TopBar.js
 @ ./frontend/dashboard/components/layout/DashboardLayout.js
 @ ./frontend/dashboard/components/Dashboard.js
 @ ./frontend/dashboard/index.js

Specifications

Polaris version: 1.7.0
React version: 16.0.0
Webpack: ^2.6.1

Source

davit-khaburdzania

Most helpful comment

@davit-khaburdzania First error is not about react 16, it's about importing scss file
I had the similar issue upgrading from older polaris version to 1.7.0

use:
@import "~@shopify/polaris/styles/foundation.scss";
instead of:
@import "~@shopify/polaris/src/styles/foundation.scss";

IrakliJani on 12 Oct 2017

👍2

All 7 comments

@davit-khaburdzania First error is not about react 16, it's about importing scss file
I had the similar issue upgrading from older polaris version to 1.7.0

use:
@import "~@shopify/polaris/styles/foundation.scss";
instead of:
@import "~@shopify/polaris/src/styles/foundation.scss";

IrakliJani on 12 Oct 2017

👍2

Actually there are 2 file not found errors here and nothing relates with React itself. Issue title must be changed.

tiendq on 13 Oct 2017

👍1

@Tiendq well this errors happened after upgrading React version

davit-khaburdzania on 13 Oct 2017

The second issue is regarding react-addons-transition-group You should now use this project instead: https://github.com/reactjs/react-transition-group