SassError: Can't find stylesheet to import. - @import '~@ctrl/ngx-emoji-mart/picker';

[Arxero]

Hello, I am writing here just to maybe help someone in the future, or maybe the author.

So I updated to angular 13 and then updated the package to the latest version and when the building got this error when building the project.

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @import '~@ctrl/ngx-emoji-mart/picker';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\styles.scss 5:9  root stylesheet

./src/styles/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @import '~@ctrl/ngx-emoji-mart/picker';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\styles.scss 5:9  root stylesheet
    at tryRunOrWebpackError (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4936:18)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3463:5)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4879:16
    at symbolIterator (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @import '~@ctrl/ngx-emoji-mart/picker';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\styles.scss 5:9  root stylesheet
    at Object.<anonymous> (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\src\styles\styles.scss:1:7)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\Hook.js:14:14)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4936:18)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\neo-async\async.js:2297:7)

Generated code for C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\Users\Maverick\Documents\Angular\gamewaver\UI\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\Users\Maverick\Documents\Angu1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n5 │ @import '~@ctrl/ngx-emoji-mart/picker';\r\n  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  ╵\n  src\\styles\\styles.scss 5:9  root stylesheet");

and this is how I managed to fix it

Hope it is useful to someone also if there is a better solution let me know.

[scttcper]

🎉 This issue has been resolved in version 6.2.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[Arxero]

thank you updated it and seems to be working just fine 😉

[bryanmcgrane]

I had to remove the tilde on Angular 15 to get the import working

@import '@ctrl/ngx-emoji-mart/picker';

[Rameshraja321]

I had to remove the tilde on Angular 15 to get the import working

@import '@ctrl/ngx-emoji-mart/picker';

yes it's also works Angular 16