search

Munter / subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
MIT License
1.56k stars 29 forks source link

Error: Evaluation failed: TypeError: counteraction is not a function #157

Closed s0kil closed 2 years ago

s0kil commented 2 years ago

This error started happening recently, not sure why

> build:subfont
> subfont build/index.html --root build/ --canonical-root https://eastcoastmining.com/ --recursive --in-place --no-fallbacks --inline-css --dynamic --formats=woff2 --formats=woff --formats=truetype

 ✔ 0.002 secs: logEvents
 ✔ 0.133 secs: loadAssets
 ✔ 7.353 secs: populate
 ✔ 0.079 secs: checkIncompatibleTypes
 ✔ 0.018 secs: applySourceMaps
 ✔ 0.066 secs: populate
Downloading Chromium 856583
Create optimal font subsets from your actual font usage.
cli.js [options] <htmlFile(s) | url(s)>

Options:
  --help                             Show help                                                                                                                [boolean]
  --version                          Show version number                                                                                                      [boolean]
  --root                             Path to your web root (will be deduced from your input files if not specified)                                            [string]
  --canonical-root, --canonicalroot  URI root where the site will be deployed. Must be either an absolute, a protocol-relative, or a root-relative url         [string]
  --output, -o                       Directory where results should be written to                                                                              [string]
  --browsers                         Override your projects browserslist configuration to specify which browsers to support. Controls font formats and polyfill.
                                     Defaults to browserslist's default query if your project has no browserslist configuration                                [string]
  --formats                          Font formats to use when subsetting. The default is to select the formats based on the browser capabilities as specified via
                                     --browsers or the browserslist configuration.                                      [string] [choices: "woff2", "woff", "truetype"]
  --fallbacks                        Include fallbacks so the original font will be loaded when dynamic content gets injected at runtime. Disable with --no-fallbacks
                                                                                                                                              [boolean] [default: true]
  --dynamic                          Also trace the usage of fonts in a headless browser with JavaScript enabled                             [boolean] [default: false]
  --in-place, -i                     Modify HTML-files in-place. Only use on build artifacts                                                 [boolean] [default: false]
  --inline-css                       Inline CSS that declares the @font-face for the subset fonts                                            [boolean] [default: false]
  --font-display                     Injects a font-display value into the @font-face CSS.
                                                                                  [string] [choices: "auto", "block", "swap", "fallback", "optional"] [default: "swap"]
  --recursive, -r                    Crawl all HTML-pages linked with relative and root relative links. This stays inside your domain        [boolean] [default: false]
  --relative-urls                    Issue relative urls instead of root-relative ones                                                       [boolean] [default: false]
  --silent, -s                       Do not write anything to stdout                                                                         [boolean] [default: false]
  --debug, -d                        Verbose insights into font glyph detection                                                              [boolean] [default: false]
  --dry-run, --dry, --dryrun         Don't write anything to disk                                                                            [boolean] [default: false]
Error: Evaluation failed: TypeError: counteraction is not a function
    at renderListItem (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21747:21)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21730:24
    at Array.map (<anonymous>)
    at expandListIndicators (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21729:23)
    at expandComputedStyle (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22492:13)
    at traversePreOrder (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22714:16)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22735:18
    at Array.map (<anonymous>)
    at traversePreOrder (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22734:17)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22735:18
    at ExecutionContext._evaluateInternal (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/puppeteer-core@8.0.0/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
    at async HeadlessBrowser.tracePage (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/github.com+s0kil+subfont@3136a3b2f1050a8333d567d2dd8278756ca0d06c/node_modules/subfont/lib/HeadlessBrowser.js:117:22)
    at async subsetFonts (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/github.com+s0kil+subfont@3136a3b2f1050a8333d567d2dd8278756ca0d06c/node_modules/subfont/lib/subsetFonts.js:689:17)
    at async subfont (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/github.com+s0kil+subfont@3136a3b2f1050a8333d567d2dd8278756ca0d06c/node_modules/subfont/lib/subfont.js:221:24)
 ELIFECYCLE  Command failed with exit code 1.
s0kil commented 2 years ago

I am using a custom fork of subfont, https://github.com/s0kil/subfont But it's up-to-date with origin/master.

papandreou commented 2 years ago

Hmm, I tried to reproduce for 10 minutes, but failed. Seems like counteraction is a function in that place in the font-tracer build I end up with.

Could you let me know which list-style-type CSS property values you have in play in your project?

s0kil commented 2 years ago

@papandreou I don't use list-style-type anywhere in my project

s0kil commented 2 years ago

@papandreou Any other way I could debug where this is failing?

papandreou commented 2 years ago

Hmm, then those counters probably come from the default browser stylesheet, and the font-tracer build is just totally broken. I did fix such an error in font-tracer 3.something, IIRC a broken dist/fontTracer.browser.js had snuck in.

When I build it now, I do get some cyclic dependency warnings involving counteraction, which could also be significant:

$ npm run dist

> font-tracer@3.0.1 dist /Users/andreas.lind/code/font-tracer
> rm -fr dist && mkdir dist && rollup --config rollup.config.js --sourcemap --format umd --name fontTracer -o dist/fontTracer.browser.js index.browser.js

index.browser.js → dist/fontTracer.browser.js...
(!) Circular dependencies
node_modules/counteraction/lib/index.js -> node_modules/counteraction/lib/renderers/Additive.js -> node_modules/counteraction/lib/renderers/CounterStyle.js -> node_modules/counteraction/lib/index.js
node_modules/counteraction/lib/index.js -> node_modules/counteraction/lib/renderers/Additive.js -> node_modules/counteraction/lib/renderers/CounterStyle.js -> /Users/andreas.lind/code/font-tracer/node_modules/counteraction/lib/index.js?commonjs-proxy -> node_modules/counteraction/lib/index.js
created dist/fontTracer.browser.js in 5.2s

But first off, could you make sure it reproduces with a fresh install of the official subfont 6.4.0?

s0kil commented 2 years ago

@papandreou

So with "subfont": "^6.4.0", in package.json, here is the error, same as the one mentioned above:

> build:subfont
> subfont build/index.html --root build/ --canonical-root https://eastcoastmining.com/ --recursive --in-place --no-fallbacks --inline-css --dynamic --formats=woff2 --formats=woff --formats=truetype

 ✔ 0.002 secs: logEvents
 ✔ 0.122 secs: loadAssets
 ✔ 4.255 secs: populate
 ✔ 0.072 secs: checkIncompatibleTypes
 ✔ 0.016 secs: applySourceMaps
 ✔ 0.060 secs: populate
Create optimal font subsets from your actual font usage.
cli.js [options] <htmlFile(s) | url(s)>

Options:
  --help                             Show help                                                                                                                                                            [boolean]
  --version                          Show version number                                                                                                                                                  [boolean]
  --root                             Path to your web root (will be deduced from your input files if not specified)                                                                                        [string]
  --canonical-root, --canonicalroot  URI root where the site will be deployed. Must be either an absolute, a protocol-relative, or a root-relative url                                                     [string]
  --output, -o                       Directory where results should be written to                                                                                                                          [string]
  --browsers                         Override your projects browserslist configuration to specify which browsers to support. Controls font formats and polyfill. Defaults to browserslist's default query if your
                                     project has no browserslist configuration                                                                                                                             [string]
  --formats                          Font formats to use when subsetting. The default is to select the formats based on the browser capabilities as specified via --browsers or the browserslist configuration.
                                                                                                                                                                    [string] [choices: "woff2", "woff", "truetype"]
  --fallbacks                        Include fallbacks so the original font will be loaded when dynamic content gets injected at runtime. Disable with --no-fallbacks                     [boolean] [default: true]
  --dynamic                          Also trace the usage of fonts in a headless browser with JavaScript enabled                                                                         [boolean] [default: false]
  --in-place, -i                     Modify HTML-files in-place. Only use on build artifacts                                                                                             [boolean] [default: false]
  --inline-css                       Inline CSS that declares the @font-face for the subset fonts                                                                                        [boolean] [default: false]
  --font-display                     Injects a font-display value into the @font-face CSS.                                    [string] [choices: "auto", "block", "swap", "fallback", "optional"] [default: "swap"]
  --recursive, -r                    Crawl all HTML-pages linked with relative and root relative links. This stays inside your domain                                                    [boolean] [default: false]
  --relative-urls                    Issue relative urls instead of root-relative ones                                                                                                   [boolean] [default: false]
  --silent, -s                       Do not write anything to stdout                                                                                                                     [boolean] [default: false]
  --debug, -d                        Verbose insights into font glyph detection                                                                                                          [boolean] [default: false]
  --dry-run, --dry, --dryrun         Don't write anything to disk                                                                                                                        [boolean] [default: false]
Error: Evaluation failed: TypeError: counteraction is not a function
    at renderListItem (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21747:21)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21730:24
    at Array.map (<anonymous>)
    at expandListIndicators (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:21729:23)
    at expandComputedStyle (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22492:13)
    at traversePreOrder (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22714:16)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22735:18
    at Array.map (<anonymous>)
    at traversePreOrder (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22734:17)
    at /home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/font-tracer@3.0.1/node_modules/font-tracer/dist/fontTracer.browser.js:22735:18
    at ExecutionContext._evaluateInternal (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/puppeteer-core@8.0.0/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
    at async HeadlessBrowser.tracePage (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/subfont@6.4.0/node_modules/subfont/lib/HeadlessBrowser.js:117:22)
    at async subsetFonts (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/subfont@6.4.0/node_modules/subfont/lib/subsetFonts.js:689:17)
    at async subfont (/home/danielsokil/Lab/eastcoastmining/exposure/node_modules/.pnpm/subfont@6.4.0/node_modules/subfont/lib/subfont.js:221:24)
 ELIFECYCLE  Command failed with exit code 1.
papandreou commented 2 years ago

Hmm, okay, thanks for checking. Any chance you can share a copy of that build folder?

papandreou commented 2 years ago

Thanks. I can reproduce it with your build. Will try to figure it out!

papandreou commented 2 years ago

It is due to those cyclic dependencies in counteraction messing up the rollup build of font-tracer. If I do a quick hack to avoid them, your page builds fine.

papandreou commented 2 years ago

Applied a fix in counteraction 1.3.1 / font-tracer 3.1.0 / subfont 6.4.1. Thanks for reporting 🤗

s0kil commented 2 years ago

@papandreou Thanks, testing this now.

s0kil commented 2 years ago

Testing the latest changes, looks good.