Console Errors

[ericwfisher]

The demo projects seem to run fine but when I copy the dist files to my existing application (it's a large angular 14 app, hence tons of style tags in the header ... if that's helpful to know) and link to scroll-timeline.js, I get the errors (pasted below) thrown upon initial load, before I have even attempted to implement any sort of scroll based animations.

Of note: The polyfill does seem to succeed and it turns out I can programmatically create animations via ScrollTimeline.

scroll-timeline-css-parser.js:630 Uncaught TypeError: this.parseError is not a function
    at n.advance (scroll-timeline-css-parser.js:630:18)
    at n.eatUntil (scroll-timeline-css-parser.js:637:12)
    at n.parseSelector (scroll-timeline-css-parser.js:650:10)
    at n.parseQualifiedRule (scroll-timeline-css-parser.js:562:27)
    at n.transpileStyleSheet (scroll-timeline-css-parser.js:79:27)
    at e (scroll-timeline-css.js:39:25)
    at MutationObserver.observe.childList (scroll-timeline-css.js:13:11)

scroll-timeline-css.js:70 Uncaught TypeError: Cannot read properties of null (reading 'animation-timeline')
    at scroll-timeline-css.js:70:24
    at scroll-timeline-css.js:162:24
    at Array.forEach (<anonymous>)
    at scroll-timeline-css.js:153:89

[ericwfisher]

Update:

Since #90 was merged I now only get the first error at load time. Here it is again for reference:

FWIW ... There is no parseError method defined on the css parser that I can find, and it looks like several other methods just throw a regular old Error.

scroll-timeline-css-parser.js:648 Uncaught TypeError: this.parseError is not a function
    at n.advance (scroll-timeline-css-parser.js:648:18)
    at n.eatUntil (scroll-timeline-css-parser.js:655:12)
    at n.parseSelector (scroll-timeline-css-parser.js:668:10)
    at n.parseQualifiedRule (scroll-timeline-css-parser.js:579:27)
    at n.transpileStyleSheet (scroll-timeline-css-parser.js:80:27)
    at e (scroll-timeline-css.js:39:25)
    at MutationObserver.observe.childList (scroll-timeline-css.js:13:11)

[mehdi-kazemi]

Thanks for reporting this.
You get this error after opening demo files? Which demo file?

[ericwfisher]

Not the demo files. Those run fine. It's when I try to integrate into my own larger application. I guess I'm just wondering if there are any known issues parsing larger css payloads and maybe the very focused demos just never hit this issue?

[mehdi-kazemi]

That could be the case. If you can share some of your examples, I can take a look into them.

[ericwfisher]

I'll see what I can do. I don't have a lot of time to dedicate to this and I can't publicly expose the app itself. I'll try to create a shareable example that reproduces the issue, but it may take some time. Bear with me.

[ericwfisher]

Okay, I figured out how to reproduce the error. Something in my css processing chain is appending @charset "UTF-8" to the end of a style block which in turn causes the error in css parser. You can reproduce this in any demo by adding @charset "UTF-8" as the final line (or the only line) of any style block. As long as it is not the final line the parser seems to handle it gracefully.

[bramus]

This is invalid use. @charset must be first in the style sheet and not be preceded by any character. See the spec for more details.

But still shouldn’t throw and recover from it, though.

[ericwfisher]

I am aware that it is invalid. I didn't think that fact was relevant to the parser throwing an error.

Just for reference:
The reason (as I now know :) ) I have an unintended/misplaced @charset is due to a bug reported to the Angular CLI team here, but the CLI team determined it was the css-loader team's issue and that issue has yet to be addressed. Which is a long winded way of saying that I suspect there may be many apps out there with this same issue.

Even further information:
This issue was also posted as a bug here but has reportedly been addressed. Both of these libs are dependencies in my app. Still trying figure out which may be the cause.

[carletonm]

I'm getting the exact same error while trying to use the polyfill on my Wordpress website.

Uncaught TypeError: this.parseError is not a function
at n.advance (scroll-timeline-css-parser.js:681:18)
at n.eatUntil (scroll-timeline-css-parser.js:688:12)
at n.parseSelector (scroll-timeline-css-parser.js:701:10)
at n.parseQualifiedRule (scroll-timeline-css-parser.js:612:27)
at n.transpileStyleSheet (scroll-timeline-css-parser.js:81:27)
at e (scroll-timeline-css.js:39:25)
at MutationObserver.observe.childList (scroll-timeline-css.js:13:11)

[bramus]

I dug a bit deeper and noticed that parseError was simply missing from the polyfill. I added this back in #139. This issue can be closed, as the error no longer appears (ping @kevers-google @flackr).

As for the polyfill not being able to parse @charset and other at-rules: that’s being tracked in #80 and #100.