Lwc: querySelector result is always empty if file makes a non-default export

Created on 26 May 2020 · 5Comments · Source: salesforce/lwc

Description

If an LWC makes a default export for its component, plus an additional export, then template.querySelectorAll('div') (or any selection) is empty. Removing the additional export removes this bug.

Steps to Reproduce

Using this template:

<template>
    <div>what in the world</div>
</template>

And this JavaScript:

import { LightningElement, api } from "lwc";

// THIS IS THE MONEY LINE
export const t1 = 123;

export default class MyComponent extends LightningElement {
    @api reportValidity() {
        console.log('div count', this.template.querySelectorAll('div').length);
    }
    renderedCallback() {
        console.log('div count', this.template.querySelectorAll('div').length);
    }
}

The query selector will always return 0 results, no matter what.

If you remove the export const t1 line (so there is only the default export) this problem disappears.

You can see the diff between the compiled versions here: https://www.diffchecker.com/iFhvJQBF

I tried to repro this in the playground but couldn't: https://developer.salesforce.com/docs/component-library/tools/playground/ol0g50Fk0/1/edit

However I don't think it's any issue in our org, as it's a pretty simple dev org.