14.2.0 Error

[gbardwell]

I just updated from 14.1.14 to 14.2.0... would not compile. Error below. Reverting back fixed the issue.

Also, got this warning after I reverted:
[1] - ngx-toastr [es2015/esm2015] (git+https://github.com/scttcper/ngx-toastr.git)
[1] Debugger listening on ws://127.0.0.1:62943/0b324e41-abfe-47de-98dc-47dc64f5a4fe
For help, see: https://nodejs.org/en/docs/inspector
[1] Debugger attached.
[1] Encourage the library authors to publish an Ivy distribution.

14.2.0 Compile error

[1]
[1] ./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!
./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!./src/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[1] SassError: Can't find stylesheet to import.
[1] ╷
[1] 8 │ @import '~ngx-toastr/toastr';
[1] │ ^^^^^^^^^^^^^^^^^^^^
[1] ╵
[1] src\styles_project.scss 8:9 @import
[1] src\styles\styles.scss 38:9 root stylesheet
[1]
[1] ./src/styles/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[1] HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[1] SassError: Can't find stylesheet to import.
[1] ╷
[1] 8 │ @import '~ngx-toastr/toastr';
[1] │ ^^^^^^^^^^^^^^^^^^^^
[1] ╵
[1] src\styles_project.scss 8:9 @import
[1] src\styles\styles.scss 38:9 root stylesheet
[1] at tryRunOrWebpackError (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\HookWebpackError.js:88:9)
[1] at webpack_require_module (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4963:12)
[1] at webpack_require (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4920:18)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4991:20
[1] at symbolIterator (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3485:9)
[1] at done (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3527:9)
[1] at Hook.eval [as callAsync] (eval at create (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
[1] at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\Hook.js:18:14)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4898:43
[1] at symbolIterator (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3482:9)
[1] at timesSync (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:2297:7)
[1] at Object.eachLimit (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3463:5)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4863:16
[1] at symbolIterator (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3485:9)
[1] at timesSync (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:2297:7)
[1] at Object.eachLimit (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3463:5)
[1] -- inner error --
[1] Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[1] SassError: Can't find stylesheet to import.
[1] ╷
[1] 8 │ @import '~ngx-toastr/toastr';
[1] │ ^^^^^^^^^^^^^^^^^^^^
[1] ╵
[1] src\styles_project.scss 8:9 @import
[1] src\styles\styles.scss 38:9 root stylesheet
[1] at Object. (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!C:\Users\13019\WebstormProjects\SaturnOne\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!C:\Users\13019\WebstormPr
ojects\SaturnOne\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].rules[1].use[0]!C:\Users\13019\WebstormProjects\SaturnOne\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].rules[1].use[1]!C:\Users\13019\WebstormProjects\SaturnOne\src\styles\styles.scss:1:7)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
[1] at Hook.eval [as call] (eval at create (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
[1] at Hook.CALL_DELEGATE [as _call] (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\Hook.js:14:14)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4965:39
[1] at tryRunOrWebpackError (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\HookWebpackError.js:83:7)
[1] at webpack_require_module (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4963:12)
[1] at webpack_require (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4920:18)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4991:20
[1] at symbolIterator (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3485:9)
[1] at done (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3527:9)
[1] at Hook.eval [as callAsync] (eval at create (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
[1] at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\tapable\lib\Hook.js:18:14)
[1] at C:\Users\13019\WebstormProjects\SaturnOne\node_modules\webpack\lib\Compilation.js:4898:43
[1] at symbolIterator (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:3482:9)
[1] at timesSync (C:\Users\13019\WebstormProjects\SaturnOne\node_modules\neo-async\async.js:2297:7)
[1]
[1] Generated code for C:\Users\13019\WebstormProjects\SaturnOne\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!C:\Users\13019\WebstormProjects\SaturnOne\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!C:\Users\13019\WebstormProjects\S
aturnOne\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].rules[1].use[0]!C:\Users\13019\WebstormProjects\SaturnOne\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].rules[1].use[1]!C:\Users\13019\WebstormProjects\SaturnOne\src\styles\styles.scss
[1] 1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ╷\n8 │ @import '~ngx-toastr/toastr';\n │ ^^^^^^^^^^^^^^^^^^^^\n ╵\n src\styles\_project.scss 8:9 @import\n src\styles\styles.scss 38:9 root styleshee
t");

[scttcper]

Looks like maybe the scss file didn't get shipped

[scttcper]

Looks like it should be in there?

[kjchong94]

I am having the exact same issue. It works fine when revert back to 14.1.14 .

[scttcper]

not sure whats going on with this but you can import it with

@import 'node_modules/ngx-toastr/toastr';

[SRKnoldus]

Facing the same error, the build(setup in Github actions) is failing but in the local environment, it's passing.

[SRKnoldus]

This got it resolved -
@import 'node_modules/ngx-toastr/toastr';
Thanks for the resolution @scttcper ✌🏻🙂

[Jacobra93]

Any idea why switching the import to explicitly say node_modules fixes it and what changed? The ~ should be doing the same same thing right?

[scttcper]

https://blog.angular.io/the-new-state-of-css-in-angular-bec011715ee6

i haven't tried @use yet but there might be something worth trying in this blog post

[logitimate]

I wonder since this was built with Angular 13 if that is the issue. Should this have been a major version bump instead of a minor?

[scttcper]

I believe it needed exports, documented here https://github.com/ng-packagr/ng-packagr/blob/044b47ae15fa91fcc658e33e74b28f6d4baf2022/docs/copy-assets.md#exporting-styles

[scttcper]

🎉 This issue has been resolved in version 14.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀