Imports from '@material/...' have no available symbols

[sgammon]

Hello esteemed tsickle authors,

I am having trouble using tsickle via Bazel, to compile material-components-web from its TS sources. I'm using rules_closure (latest, plus some patches, that shouldn't interfere here), and rules_nodejs latest as well.

Here's the output I get when trying to compile things:

INFO: Analyzed 168 targets (2 packages loaded, 284 targets configured).
INFO: Found 168 targets...
ERROR: /Volumes/.../BUILD:244:1: Compiling 543 JavaScript files to .../ui-demo.js failed (Exit 1): ClosureWorker failed: error executing command 
  (cd /private/var/tmp/_bazel_sam/.../execroot/some_workspace && \
  exec env - \
  bazel-out/host/bin/external/io_bazel_rules_closure/java/io/bazel/rules/closure/ClosureWorker @@bazel-out/darwin-fastbuild/bin/some_workspace/ui-demo.js-0.params)
Execution platform: @bazel_tools//platforms:host_platform
bazel-out/darwin-fastbuild/bin/external/com_google_mdc/packages/mdc-ripple/component.closure.js:43: 
Originally at:
external/com_google_mdc/packages/mdc-ripple/component.ts:30: ERROR - Failed to load module "./util"
import * as util from './util';
^
  ProTip: "JSC_JS_MODULE_LOAD_WARNING" or "missingSourcesWarnings" or "moduleLoad" can be added to the `suppress` attribute of:
  @com_google_mdc//:ripple

1 error(s), 0 warning(s)

INFO: Elapsed time: 4.708s, Critical Path: 3.46s
INFO: 4 processes: 4 worker.
FAILED: Build did NOT complete successfully

Now, digging into the sources it mentions, here is the original line of TypeScript (extra lines provided for context here, last one is the offending line):

import {MDCComponent} from '@material/base/component';
import {applyPassive} from '@material/dom/events';
import {matches} from '@material/dom/ponyfill';
import {MDCRippleAdapter} from './adapter';
import {MDCRippleFoundation} from './foundation';
import {MDCRippleAttachOpts, MDCRippleCapableSurface} from './types';

import * as util from './util';

This file is picked up by tsc/tsickle and rewritten into Closure-style JS, which corresponds to that set of imports (again, context provided, but the offending line is at the end):

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
goog.module('some_workspace.external.com_google_mdc.packages.mdc$2dripple.component');
var module = module || { id: 'external/com_google_mdc/packages/mdc-ripple/component.js' };
var tslib_1 = goog.require('some_workspace.external.io_bloombox_labs_NEURON.defs.tsc.tslib');
const tsickle_component_1 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2dbase.component");
const tsickle_events_2 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2ddom.events");
const tsickle_ponyfill_3 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2ddom.ponyfill");
const tsickle_adapter_4 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2dripple.adapter");
const tsickle_foundation_5 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2dripple.foundation");
const tsickle_types_6 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2dripple.types");
const tsickle_util_7 = goog.requireType("some_workspace.external.com_google_mdc.packages.mdc$2dripple.util");
/**
 * @license
 * Copyright 2016 Google Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
var component_1 = goog.require('some_workspace.external.com_google_mdc.packages.mdc$2dbase.component');
var events_1 = goog.require('some_workspace.external.com_google_mdc.packages.mdc$2ddom.events');
var ponyfill_1 = goog.require('some_workspace.external.com_google_mdc.packages.mdc$2ddom.ponyfill');
var foundation_1 = goog.require('some_workspace.external.com_google_mdc.packages.mdc$2dripple.foundation');

const util = tslib_1.__importStar(require("./util"));

The line that's breaking the build, currently, is:

const util = tslib_1.__importStar(require("./util"));

This leads to a few questions:

1. Is this valid, intended JS output from tsickle?
2. If so, why is it special, with the others being rewritten?
3. Is there a way I can get Closure Compiler to accept this and compile it?

[sgammon]

adding some context here.

my tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "importHelpers": true,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["es5", "es6", "dom"],
    "moduleResolution": "node",
    "newLine": "lf",
    "noEmitOnError": false,
    "noErrorTruncation": true,
    "noFallthroughCasesInSwitch": true,
    "noStrictGenericChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "pretty": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "stripInternal": true,
    "target": "es5",
    "types": []
  },
  "exclude": [
    "scripts/**/*.ts"
  ],
  "bazelOptions": {
    "workspaceName": "mdc",
    "es5Mode": true,
    "tsickle": true,
    "tsickleGenerateExterns": true,
    "tsickleExternsPath": "externs.js",
    "googmodule": true
  }
}

[evmar]

I am pretty confused here because I'm unable locally to get code to trigger the __importStar code path.

One thing I noticed is that you are providing es5Mode: true. This is poorly documented (aka not at all) but the es5 output is intended to be for transpiling direct to browser without Closure installed (but still using the Closure module loader). It should be false when you are intending to pass the code on to Closure compilation. I think you could try leaving that out or setting it false to see if it fixes things here.

[sgammon]

@emvar - thank you, that was super helpful. dropping that from my tsconfig.json seemed to unblock the build. however, now i run into the following issue:

INFO: Analyzed 176 targets (0 packages loaded, 0 targets configured).
INFO: Found 176 targets...
ERROR: /Volumes/.../BUILD:259:1: Compiling 1640 JavaScript files to .../.../ui-demo.js failed (Exit 1): ClosureWorker failed: error executing command 
  (cd /private/var/tmp/_bazel_sam/.../execroot/some_workspace && \
  exec env - \
  bazel-out/host/bin/external/io_bazel_rules_closure/java/io/bazel/rules/closure/ClosureWorker @@bazel-out/darwin-fastbuild/bin/bloombox/dashboard/ui-demo.js-0.params)
Execution platform: @bazel_tools//platforms:host_platform
defs/mdc.js:13: ERROR - Requested module does not have an export "mdcAutoInit".
const {mdcAutoInit} = goog.require('some_workspace.external.com_google_mdc.packages.mdc$2dauto$2dinit.index');
^
  ProTip: "JSC_DOES_NOT_HAVE_EXPORT" can be added to the `suppress` attribute of:
  //defs:mdc-bridge

1 error(s), 0 warning(s)

INFO: Elapsed time: 3.020s, Critical Path: 2.49s
INFO: 3 processes: 3 worker.
FAILED: Build did NOT complete successfully

This is odd, because it should be exporting that value. The originally-specified value is here in the MDC sources.

Examining Bazel's intermediates on-disk, I see a lot of these files, where exports might be expected to live:

goog.module('io_bloombox_labs_NEURON.external.com_google_mdc.packages.mdc$2dauto$2dinit.index');
// Export an empty object of unknown type to allow imports.
// TODO: use typeof once available
exports = /** @type {?} */ ({});

My tsconfig.json now looks like so:

{
  "compilerOptions": {
    "declaration": true,
    "importHelpers": true,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["es5", "es6", "dom"],
    "moduleResolution": "node",
    "newLine": "lf",
    "noEmitOnError": false,
    "noErrorTruncation": true,
    "noFallthroughCasesInSwitch": true,
    "noStrictGenericChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "pretty": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "stripInternal": true,
    "target": "es6",
    "types": []
  },
  "exclude": [
    "scripts/**/*.ts"
  ],
  "bazelOptions": {
    "workspaceName": "mdc",
    "tsickle": true,
    "googmodule": true
  }
}

[evmar]

I think the issue is now imports of '@Material'. I wrote some info about how we get confused by them here:
#1041

I think @alexeagle is the master of the bazel rules. Alex, do we expect this to work?

[alexeagle]

No, I'm not sure whether this should work or not. We don't really support Closure + Bazel/TS yet, due to resources... but I'm talking to that team today about it.

I'll dig into #1041 first.