Using Lerna/Yarn to build a new Ionic App

[KevinJTaylor]

Description:
I am trying to use Lerna to build an application which includes a couple of different workspaces, one of which is a new Ionic app. I upgraded to the latest version of Ionic and created a new app to be sure I was using the latest and greatest. Anyway, I get a number of build issues relating to the dependencies of the cli. I've got round most of these by linking sub-folders in node_modules to the folder of the same name in the parent ie. @angular, @Ionic, @ionic-native, ionic-angular, rxjs, tslib and typescript, but I'm still getting an issue with the ionic icons

**File to import not found or unreadable: ionicons-icons**

So first this 'fix' doesn't seem right to me. Lerna obviously leaves ionic-app-scripts in the ionic node_modules/.bin folder, rather than hoisting it up to the parent, but that means that none of the relative paths work. Is there a better way using Lerna and Ionic together?

Second, if this approach is kind of right, is there a way to fix the issue with ionicons ...? I'm sure the path is right, I guess it is possible that the file is corrupt in some way but it is more likely to be the way I'm linking to it ...?

Output:
[11:18:10] sass: node_modules/ionic-angular/fonts/ionicons.scss, line: 9
File to import not found or unreadable: ionicons-icons. Parent style sheet:
/Users/804463/Documents/MyDev/git/uk-td-demo/fridge-conversation-demo/workspaces/client/node_modules/ionic-angular/fonts/ionicons.scss

   L9:  @import "ionicons-icons";
  L10:  @import "ionicons-variables";

[11:18:10] ionic-app-script task: "build"
[11:18:10] Error: Failed to render sass to css
Error: Failed to render sass to css
at BuildError.Error (native)
at new BuildError (/Users/804463/Documents/MyDev/git/uk-td-demo/fridge-conversation-demo/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at Object.callback (/Users/804463/Documents/MyDev/git/uk-td-demo/fridge-conversation-demo/node_modules/@ionic/app-scripts/dist/sass.js:210:24)
at options.error (/Users/804463/Documents/MyDev/git/uk-td-demo/fridge-conversation-demo/node_modules/node-sass/lib/index.js:294:32)
npm ERR! code ELIFECYCLE

My ionic info:
cli packages: (/Users/804463/.npm-packages/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v6.10.3
npm   : 5.6.0 
OS    : OS X Mavericks
Xcode : Xcode 6.2 Build version 6C131e 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[KevinJTaylor]

OK I've fixed the ionicons issue by just linking that folder in too ... pretty obvious.

ln -s ../../../node_modules/ionicons ./node_modules/ionicons

My main query though is still around this approach. Just doesn't feel right to link node_modules folders.

[imhoffd]

@KevinJTaylor I don't think there's anything wrong necessarily wrong with your approach (see lerna's hosting mechanism: https://github.com/lerna/lerna/blob/master/doc/hoist.md)

However, I know for a fact some of our tooling is explicitly checking for hard-coded ./node_modules/whatever instead of following the module resolution spec. I'll reserve some time soon to take a look into this.

[imhoffd]

Considating to this mega-issue 👉 #2232

@KevinJTaylor Let's continue the discussion there, please! 😄

[KevinJTaylor]

Thanks @dwieeb seems reasonable