[lit] Closure Compiler: JSC_UNDEFINED_VARIABLE `JSCompiler_renameProperty`

[sgammon]

Description

Cannot build with Closure Compiler, even in ADVANCED mode with use_types_for_optimization, due to JSCompiler_renameProperty and trustedTypes

Live Demo

See repro here

Steps to Reproduce

1. Set up an environment with lit-element via npm or yarn (in my case, yarn from bazel)
2. Write a little sample element that imports lit-element and uses it
3. Compile it with Closure Compiler in ADVANCED mode, with use_types_for_optimization set to true

Expected Results

Built bundle, with JSCompiler_renameProperty being treated as a special compiler primitive

Actual Results

Instead, it is treated like a regular variable name, which is missing from the compilation unit, yielding a JSC_UNDEFINED_VARIABLE error

Browsers Affected

N/A (Build tooling)

Versions

• lit-element: v2.4.0 via NPM
• webcomponents: N/A

[sgammon]

Full invocation of Bazel with all flags to Closure (long sandbox paths omitted for readability):

ERROR: /Volumes/KICKSTART/lit-element-repro/BUILD.bazel:12:24: Action example-bundle.js failed (Exit 1): sandbox-exec failed: error executing command 
  (cd /private/var/tmp/.../execroot/lit_element_repro && \
  exec env - \
    BAZEL_NODE_MODULES_ROOT=npm/node_modules \
    COMPILATION_MODE=fastbuild \
    TMPDIR=/var/.../ \
  /usr/bin/sandbox-exec -f /private/var/tmp/.../sandbox.sb /var/tmp/.../process-wrapper '--timeout=0' '--kill_delay=15' bazel-out/host/bin/external/npm/google-closure-compiler/bin/google-closure-compiler.sh '--platform=native' '--isolation_mode=IIFE' '--compilation_level=ADVANCED' '--dependency_mode=PRUNE_LEGACY' '--process_common_js_modules=true' '--process_closure_primitives=true' '--module_resolution=NODE' '--env=BROWSER' '--language_in=STABLE' '--language_out=STABLE' '--use_types_for_optimization=true' '--js=node_modules/lit-element/package.json' '--js=node_modules/lit-element/lit-element.js' '--js=node_modules/lit-element/lib/*.js' '--js=node_modules/lit-html/package.json' '--js=node_modules/lit-html/lit-html.js' '--js=node_modules/lit-html/lib/*.js' '--js=./example-element.js' '--entry_point=./example-element.js' '--js_output_file=bazel-out/darwin-fastbuild/bin/example-bundle.js' --debug '--bazel_node_modules_manifest=bazel-out/darwin-fastbuild/bin/_example-bundle.module_mappings.json' --nobazel_patch_module_resolver) sandbox-exec failed: error executing command 
  (cd /private/var/tmp/.../execroot/lit_element_repro && \
  exec env - \
    BAZEL_NODE_MODULES_ROOT=npm/node_modules \
    COMPILATION_MODE=fastbuild \
    TMPDIR=/var/.../T/ \
  /usr/bin/sandbox-exec -f /private/var/tmp/.../sandbox.sb /var/tmp/.../process-wrapper '--timeout=0' '--kill_delay=15' bazel-out/host/bin/external/npm/google-closure-compiler/bin/google-closure-compiler.sh '--platform=native' '--isolation_mode=IIFE' '--compilation_level=ADVANCED' '--dependency_mode=PRUNE_LEGACY' '--process_common_js_modules=true' '--process_closure_primitives=true' '--module_resolution=NODE' '--env=BROWSER' '--language_in=STABLE' '--language_out=STABLE' '--use_types_for_optimization=true' '--js=node_modules/lit-element/package.json' '--js=node_modules/lit-element/lit-element.js' '--js=node_modules/lit-element/lib/*.js' '--js=node_modules/lit-html/package.json' '--js=node_modules/lit-html/lit-html.js' '--js=node_modules/lit-html/lib/*.js' '--js=./example-element.js' '--entry_point=./example-element.js' '--js_output_file=bazel-out/darwin-fastbuild/bin/example-bundle.js' --debug '--bazel_node_modules_manifest=bazel-out/darwin-fastbuild/bin/_example-bundle.module_mappings.json' --nobazel_patch_module_resolver)
(node:9565) ExperimentalWarning: The fs.promises API is experimental
node_modules/lit-element/lib/updating-element.js:118:33: 
Originally at:
node_modules/lit-element/src/lib/updating-element.ts:278:12: ERROR - [JSC_UNDEFINED_VARIABLE] variable JSCompiler_renameProperty is undeclared
  278|             JSCompiler_renameProperty('_classProperties', this))) {
                   ^^^^^^^^^^^^^^^^^^^^^^^^^

1 error(s), 0 warning(s)
Target //:example-bundle failed to build
INFO: Elapsed time: 2.714s, Critical Path: 2.12s
INFO: 2 processes: 2 internal.
FAILED: Build did NOT complete successfully

[rictic]

Do you have a repro I can take a look at? I'm unfamiliar with using bazel with closure compiler.

I've confrirmed that this isn't an internal google thing, JSCompiler_renameProperty is in the open source version of Closure Compiler: https://github.com/google/closure-compiler/blob/1bd6e130db57a1020dcd0b7f096ad030b2ae2db2/src/com/google/javascript/jscomp/NodeUtil.java

It looks like it should be processed whenever property renaming is enabled.

[sgammon]

@rictic agreed, it's odd - i've seen hints of needing use_types_for_optimization, or process_closure_primitives. both are active.

i've tried dispatching the Compiler through rules_closure and through google-closure-compiler (npm), no dice either time. the difference in that invocation is:

• google-closure-compiler > node > native OSX binary of compiler, or jar, via command line > Compiler
• rules_closure > JsCompiler / JsCompilerRunner > Compiler

in both cases, in ADVANCED mode, the RenameProperties pass should be active, but doesn't seem to be.

the repro is here: https://github.com/sgammon/lit-element-repro

[sgammon]

so, it's worth mentioning that this is likely not related to Bazel, since the former dispatch method largely dispatches it the same way as other non-google tooling, or a manual CLI invocation.

[nicolejadeyee]

hi @rictic, does this need to stay open?

[sgammon]

@nicolejadeyee still trying to get this to work with bazel for now, so yeah :(

[rictic]

This is a jscompiler bug, reported there as google/closure-compiler#3991

[sgammon]

thank you @rictic