search

nstudio / xplat

Cross-platform (xplat) tools for Nx workspaces.
MIT License
366 stars 52 forks source link

Error: Can't resolve '@workspace/xplat/nativescript/core' #277

Closed NgxDev closed 3 years ago

NgxDev commented 3 years ago

Can't start the nativescript app on a newly created workspace.

Repo (final result after running all the steps below): https://github.com/MrCroft/xplat-issue

Steps to reproduce (following the Xplat course from NativeScripting):

  1. npx create-nx-workspace@latest nuvious (and choose the "empty" preset)
  2. npm i --save-dev @nstudio/xplat
  3. nx g app (this needs the @nrwl/cli installed globally) and create a web angular app (I gave it the name 'tasks', same like in the Xplat course from NativeScripting). Also, I believe this step is optional. There is no problem with serving the web app, only with the nativescript app.
  4. nx g app and create a nativescript angular app (also gave it the name 'tasks')
  5. To start the ios app, I have this script: "start:ios": "cd apps/nativescript-tasks && ns run ios --no-hmr"
  6. I get this error in the console: 
    The current application is not compatible with NativeScript CLI 8.0.2.
Run 'ns migrate' to migrate your project to the latest NativeScript version.
Alternatively you may try running it with '--force' to skip this check.
  7. Trying with --force works. But we want to run the migrations.
  8. So I did cd apps/nativescript-tasks && ns migrate. Which does the following:
    • adds "@nativescript/webpack": "~5.0.0-beta.0" to apps/nativescript-tasks/package.json
    • adds "compilerOptions" to apps/nativescript-tasks/tsconfig.json
    • modifies apps/nativescript-tasks/webpack.config.js
  9. Then using a cleaning script: "clean:nativescript-tasks": "cd apps/nativescript-tasks && npx rimraf -- hooks node_modules platforms package-lock.json && npm i && npx rimraf -- package-lock.json"
  10. Then trying to start ios again, I get the errors pasted below.

A. First, there's the sass import errors. But that's a webpack thing (ns migrate didn't keep those aliases in the webpack.config.js). I could fix those easily by re-adding them to the webpack config myself. B. Then there are the errors I couldn't fix, regarding the @tasks/xplat/... imports. And VSCode also complains about those imports actually. I've even tried putting the paths from compilerOptions from tsconfig.base.ts in the tsconfig.app.ts in the nativescript app, then VSCode doesn't complain anymore, but I still get the same output/errors in the terminal.

ERROR in ./src/main.ts 5:0-50
Module not found: Error: Can't resolve '@nuvious/xplat/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'

ERROR in ./src/app.android.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import '@nuvious/xplat-nativescript-scss/index.android';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app.android.scss 1:9  root stylesheet
 @ ./src/ sync .(xml|js|s?css)$ ./app.android.scss
 @ ./src/__@nativescript_webpack_virtual_entry_javascript__ 3:16-89

ERROR in ./src/app.ios.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app.ios.scss 1:9  root stylesheet
 @ ./src/ sync .(xml|js|s?css)$ ./app.ios.scss ./app.scss
 @ ./src/__@nativescript_webpack_virtual_entry_javascript__ 3:16-89

ERROR in ./src/app.component.ts 4:0-62
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'
 @ ./src/app.module.ts 8:0-47 14:23-35 15:20-32
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/app.component.ts 5:0-72
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/features' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'
 @ ./src/app.module.ts 8:0-47 14:23-35 15:20-32
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/core/core.module.ts 4:0-69
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/core'
 @ ./src/app.module.ts 5:0-48 13:18-28
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/features/home/components/home.component.ts 3:0-52
Module not found: Error: Can't resolve '@nuvious/xplat/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/features/home/components'
 @ ./src/features/home/components/index.ts 1:0-49 2:32-45 3:0-33 3:0-33
 @ ./src/features/home/home.module.ts 5:0-62 9:19-32 17:26-41 18:21-36
 @ ./src/app.routing.ts 16:28-65
 @ ./src/app.module.ts 7:0-49 13:44-60
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/features/shared/shared.module.ts 4:0-64
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/features' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/features/shared'
 @ ./src/app.module.ts 6:0-63 13:30-42
 @ ./src/main.ts 6:0-41 11:69-78

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.44.0 compiled with 8 errors in 7182 ms
Webpack compilation complete. Watching for file changes.
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
File change detected. Starting incremental webpack compilation...
resolving "./app.scss" to "./app.ios.scss"
assets by status 13.7 MiB [cached] 7 assets
Entrypoint bundle 13.5 MiB = runtime.js 12.3 KiB vendor.js 13.5 MiB bundle.js 24.9 KiB
Entrypoint tns_modules/inspector_modules 13.5 MiB = runtime.js 12.3 KiB vendor.js 13.5 MiB tns_modules/inspector_modules.js 1.22 KiB
cached modules 4.58 MiB (javascript) 2.72 KiB (runtime) [cached] 561 modules
javascript modules 604 bytes
  modules with errors 78 bytes [errors]
    ./src/app.ios.scss 39 bytes [built] [1 error]
    ./src/app.android.scss 39 bytes [optional] [built] [1 error]
  ./src/__@nativescript_webpack_virtual_entry_javascript__ 224 bytes [built]
  ./src/ sync .(xml|js|s?css)$ 302 bytes [built]

ERROR in ./src/main.ts 5:0-50
Module not found: Error: Can't resolve '@nuvious/xplat/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'

ERROR in ./src/app.android.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import '@nuvious/xplat-nativescript-scss/index.android';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app.android.scss 1:9  root stylesheet
 @ ./src/ sync .(xml|js|s?css)$ ./app.android.scss
 @ ./src/__@nativescript_webpack_virtual_entry_javascript__ 3:16-89

ERROR in ./src/app.ios.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app.ios.scss 1:9  root stylesheet
 @ ./src/main.ts 2:0-24

ERROR in ./src/app.component.ts 4:0-62
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'
 @ ./src/app.module.ts 8:0-47 14:23-35 15:20-32
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/app.component.ts 5:0-72
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/features' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src'
 @ ./src/app.module.ts 8:0-47 14:23-35 15:20-32
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/core/core.module.ts 4:0-69
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/core'
 @ ./src/app.module.ts 5:0-48 13:18-28
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/features/home/components/home.component.ts 3:0-52
Module not found: Error: Can't resolve '@nuvious/xplat/core' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/features/home/components'
 @ ./src/features/home/components/index.ts 1:0-49 2:32-45 3:0-33 3:0-33
 @ ./src/features/home/home.module.ts 5:0-62 9:19-32 17:26-41 18:21-36
 @ ./src/app.routing.ts 16:28-65
 @ ./src/app.module.ts 7:0-49 13:44-60
 @ ./src/main.ts 6:0-41 11:69-78

ERROR in ./src/features/shared/shared.module.ts 4:0-64
Module not found: Error: Can't resolve '@nuvious/xplat/nativescript/features' in '/Users/marianstoica/www/__learning/_xplat/nuvious/apps/nativescript-tasks/src/features/shared'
 @ ./src/app.module.ts 6:0-63 13:30-42
 @ ./src/main.ts 6:0-41 11:69-78

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.44.0 compiled with 8 errors in 338 ms
Webpack compilation complete. Watching for file changes.
Successfully transferred all files on device 26D6CFDA-EBC2-4B01-854A-1E317152C8A4.
Restarting application on device 26D6CFDA-EBC2-4B01-854A-1E317152C8A4...
Successfully synced application org.nativescript.tasks on device 26D6CFDA-EBC2-4B01-854A-1E317152C8A4.
CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
‚ï∑
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
‚ïµ
src/app.ios.scss 1:9  root stylesheet
at
./src/app.ios.scss(file:///app/bundle.js:47:7)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at ./src/main.ts(file:///app/bundle.js:12:71)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at __webpack_exec__(file:///app/bundle.js:337:39)
at (file:///app/bundle.js:338:143)
at __webpack_require__.X(file: src/webpack:/tasks/webpack/runtime/startup entrypoint:6:0)
at (file:///app/bundle.js:338:47)
at (file:///app/bundle.js:343:3)
at require(:1:137)
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
‚ï∑
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
‚ïµ
src/app.ios.scss 1:9  root stylesheet
at
./src/app.ios.scss(file:///app/bundle.js:47:7)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at ./src/main.ts(file:///app/bundle.js:12:71)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at __webpack_exec__(file:///app/bundle.js:337:39)
at (file:///app/bundle.js:338:143)
at __webpack_require__.X(file: src/webpack:/tasks/webpack/runtime/startup entrypoint:6:0)
at (file:///app/bundle.js:338:47)
at (file:///app/bundle.js:343:3)
at require(:1:137)
', reason: '(null)'
*** First throw call stack:
(
0   CoreFoundation                      0x000000010b307fba __exceptionPreprocess + 242
1   libobjc.A.dylib
CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
‚ï∑
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
‚ïµ
src/app.ios.scss 1:9  root stylesheet
at
./src/app.ios.scss(file:///app/bundle.js:47:7)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at ./src/main.ts(file:///app/bundle.js:12:71)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at __webpack_exec__(file:///app/bundle.js:337:39)
at (file:///app/bundle.js:338:143)
at __webpack_require__.X(file: src/webpack:/tasks/webpack/runtime/startup entrypoint:6:0)
at (file:///app/bundle.js:338:47)
at (file:///app/bundle.js:343:3)
at require(:1:137)
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
‚ï∑
1 │ @import '@nuvious/xplat-nativescript-scss/index.ios';
│         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
‚ïµ
src/app.ios.scss 1:9  root stylesheet
at
./src/app.ios.scss(file:///app/bundle.js:47:7)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at ./src/main.ts(file:///app/bundle.js:12:71)
at __webpack_require__(file: src/webpack:/tasks/webpack/bootstrap:19:0)
at __webpack_exec__(file:///app/bundle.js:337:39)
at (file:///app/bundle.js:338:143)
at __webpack_require__.X(file: src/webpack:/tasks/webpack/runtime/startup entrypoint:6:0)
at (file:///app/bundle.js:338:47)
at (file:///app/bundle.js:343:3)
at require(:1:137)
', reason: '(null)'
*** First throw call stack:
(
0   CoreFoundation                      0x00000001053e6fba __exceptionPreprocess + 242
1   libobjc.A.dylib

node: 14.7.2 npm: 6.14.13 nativescript: 8.0.2 @nstudio/xplat: 12.5.1 @nrwl/cli: 12.5.8 @angular/core: 12.1.2 (package.json lists 12.0.0, but looking in package-lock it's 12.1.2)

NathanWalker commented 3 years ago

@MrCroft If you can try your steps 1-3 with latest:

  1. npx create-nx-workspace@latest nuvious (and choose the "empty" preset)
  2. npm i --save-dev @nstudio/xplat
  3. nx g app (this needs the @nrwl/cli installed globally) and create a web angular app (I gave it the name 'tasks', same like in the Xplat course from NativeScripting). Also, I believe this step is optional. There is no problem with serving the web app, only with the nativescript app.
  4. nx g app and create a nativescript angular app (also gave it the name 'tasks')

Please note that after creating the {N} it provides the run commands to use; they will look something like this (using the name you provided, nativescript-{your-app-name} ):

nx run nativescript-mobile:ios
NathanWalker commented 3 years ago

The core of the issue is just the npm scripts you're using - You don't need these npm scripts anymore (you can remove them) - they will cause issues with the webpack5 configuration: https://github.com/MrCroft/xplat-issue/blob/main/package.json#L30-L33

In the latest everything is standardized under hood to use the @nativescript/nx builder/executer which is why you can run everything with standard run commands, ie:

nx run nativescript-mobile:ios

nx run nativescript-mobile:android

// or if running a configuration
nx run nativescript-mobile:ios:prod

https://github.com/MrCroft/xplat-issue/blob/main/workspace.json#L413-L438

You can manage all the {N} cli options in the workspace.json for the app in that section ^ and can see here for what options are available to set: https://github.com/nativescript/nx#configuration-options

NgxDev commented 3 years ago

@NathanWalker I've just tried it out, and it's working perfectly now with the latest! So, I guess this issue can be closed. Sorry to have taken your time, thank you so much!

nativescript: 8.0.2 @nstudio/xplat: 12.7.0 @nrwl/cli: 12.7.1 @angular/core: 12.2.1