Ionicv5/Angular/SCSS - Error - extractCommentsWithHash - input.match is not a function

hey :wink:
I’ve got a question - did somebody ever had this kind of error? or can help me? this is kind of urgent as this is blocking me in my clients work…

core.js:4197 ERROR Error: Uncaught (in promise): TypeError: input.match is not a function
TypeError: input.match is not a function
    at extractCommentsWithHash (compiler.js:9005)
    at ShadowCss.shimCssText (compiler.js:8649)
    at compiler.js:18846
    at (<anonymous>)
    at compileStyles (compiler.js:18845)
    at compileComponentFromMetadata (compiler.js:18340)
    at CompilerFacadeImpl.compileComponent (compiler.js:18962)
    at Function.get (core.js:26254)
    at getComponentDef (core.js:1826)
    at verifyDeclarationsHaveDefinitions (core.js:25905)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

from what I can see its somehow coming from scss right? any clue for what I should look?
As some background info: I started to convert an old ionic3 project to ionic 5…so far I updated the typescript, routing and so on… I assume something changed also on the scss side … but what?
I’m using Ionic 5 with Angular and trying to use capacitor :slight_smile:

Can you explain the process by which you attempted this “conversion”? For example, what I always do on major version changes is:

  • spawn a completely new project with ionic start
  • add latest versions of dependencies needed to package.json
  • parachute old code into new project folder
  • build, fix errors, repeat

What I don’t ever do is to try to upgrade the project in place. There are (typically) way too many toolchain changes for this to end in anything but tears and failure.

Hi :wink:

yeah this is basically what I did :slight_smile:

I started a new project and moved the files folder by folder over and fixed them by adding missing dependcies / replacing dependcies (like cordova-native-firebase -> capacitor firebase), adding the new routes from angular and so on… the only things which I not yet completly fixed is the html and appaerently the scss as this error above looks like…even through I’m not sure what exactly is bringing this error up :frowning:

the only thing which may relate to it is this - even through I’m not using this dependency as far as I know, - also I’m using angular 10 according to the package json:

The reason I went to the upgrade method is because unusual custom configuration (like stuff in angular.json) would seem the most likely culprit, but if you haven’t touched any of the build files, that can’t be it. Ordinarily, I also try to build the new blank project before putting any of my code into it, just to make sure I don’t have local toolchain trouble. If that worked, then it must be something in your app code.

The fundamental problem looks to be that shimCssText is expecting a string, but not getting one. In an even moderately sane language, this would not throw a runtime exception, but forget about it, Jake, this is JavaScriptTown.

One thing you can do is to poke around in node_modules to find that shimCssText in the compile.js and add something like:

if (typeof(cssString) !== "string") {
  console.log("unexpected cssString: " + JSON.stringify(cssString));

…to the very beginning of the function, right before it calls extractCommentsWithHash. That should at least give you a hint as to what the offending “not a string” is, and maybe it will look recognizable to you.

To clean up hacks like this once you’ve got the information you need, just nuke node_modules and rerun npm i again.

thanks for your hint :slight_smile: but sadly this didn’t help me as JSON.stringify(input) resulted in {} - an empty object … :slight_smile: but what I got so far is that if I don’t compile all the pages its working, so I’m going through all pages and look what got this error…

Did you solve this issue? Facing the same call stack and have no idea how to continue.