Closed Th3S4mur41 closed 10 months ago
Also running into this.
Is this already a known issue? Any mention of it yet in a changelog, migration guide, or another GitHub issue? If not, may be worth doing so.
There are a lot of moving parts in this project, finding these actually helped me think it through:
Maybe you need to bump other @web/*
dependencies too? We transitioned to Node ESM recently, so maybe other dependencies need to be updated too to make it work correctly.
@bashmish that was my first thought as well, but all other @web/*
dependencies are up to date.
"@web/dev-server": "^0.4.0",
"@web/dev-server-esbuild": "^1.0.0",
"@web/test-runner": "^0.18.0",
"@web/test-runner-playwright": "^0.11.0",
Ok, thanks for answering!
I see we updated the esbuild version in 1.x.x https://github.com/modernweb-dev/web/pull/2531 Actual change made in this PR https://github.com/modernweb-dev/web/pull/2420
Maybe related to this? But I see we had tests checking if it works and they should pass, so smth in your setup is different that breaks it. It's hard to pin-point the problem without debugging. Can you make a smallest possible reproduction with this issue please?
It might take me some time to create a demo repo for this... In the meantime, here is an example of a simple component and its specs throwing the error. Hopefully, that can already help identify the error.
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('my-icon')
export class IconComponent extends LitElement {
constructor() {
super();
this.icon = '';
this.title = 'title';
this.path = 'sprite.svg';
this.viewBox = '0 0 256 256';
}
// @property({ attribute: 'icon', type: String })
declare icon: string;
// @property({ attribute: 'title', type: String })
declare title: string;
// @property({ attribute: 'path', type: String })
declare path: string;
// @property({ attribute: 'view-box', type: String })
declare viewBox: string;
/**
* These styling will be applied to the svg element.
* If the '--icon-color' variable is set, the color of the icon will be changed,
* otherwise the container element color will be used by default.
*/
static override styles = css`
svg {
--_icon-color: var(--icon-color);
fill: var(--_icon-color, currentcolor);
}
`;
override render() {
return html`<svg role="img" aria-labelledby="svgTitleId" viewBox="${this.viewBox}">
<title id="svgTitleId">${this.title}</title>
<use href="${this.path}#${this.icon}"></use>
</svg>`;
}
}
import '../src/icon-component.ts';
import { fixture, fixtureCleanup, html, expect } from '@open-wc/testing';
// eslint-disable-next-line no-duplicate-imports
import { IconComponent } from '../src/icon-component';
describe('Icon Web Component ', () => {
const spritePath = 'sprite.svg';
afterEach(function () {
fixtureCleanup();
});
it('Icon component should be properly rendered', async () => {
const el: IconComponent = await fixture(
html` <my-icon icon=${'activity'} title=${'Test label'} path=${spritePath}></my-icon>`
);
const svg = el.shadowRoot?.querySelector('svg');
const title = el.shadowRoot?.querySelector('title');
expect(svg)?.to.have.attribute('aria-labelledby');
expect(svg)?.to.have.attribute('role').equal('img');
expect(title).to.exist;
});
});
Yo!
@Th3S4mur41 @tony @bashmish
Check the "Major Changes" (which should be breaking changes) in the release notes for the plugin. It reads:
ESBuild has changed how TypeScript decorators are enabled in preparation for JavaScript decorators to land in browsers. ESBuild now requires the experimentalDecorators key to be set to true in the tsconfig.json for TypeScript decorators to be enabled.
If you are having issues with decorators after updating to this version, try setting the experimentalDecorators key in your tsconfig.json.
I tried chucking "experimentalDecorators": true
to my tsconfig.json
and it fixed the issue with the given reproduction code.
Read more about the options here: https://www.typescriptlang.org/tsconfig#experimentalDecorators.
I also needed to make sure I passed a reference to the tsconfig.json
file in the web-test-runner config file. See how to do that here: https://modern-web.dev/docs/dev-server/plugins/esbuild/
I also needed to make sure I passed a reference to the
tsconfig.json
file in the web-test-runner config file. See how to do that here: https://modern-web.dev/docs/dev-server/plugins/esbuild/
@koddsson That remaining bit did the trick! Thank you!
(I already had "experimentalDecorators": true
set in tsconfig.json
)
Nice! It's a bit unwieldy right now but maybe we can make some changes to make it better in the future. Glad we got this solved, I'll close this for now but feel free to re-ping this if things are still broken.
I also needed to make sure I passed a reference to the
tsconfig.json
file in the web-test-runner config file. See how to do that here: https://modern-web.dev/docs/dev-server/plugins/esbuild/
Thanks @koddsson
tsconfig already had "experimentalDecorators": true
set, but passing the tsconfig to esbuild solved the issue 👍
Bumping @web/dev-server-esbuild from 0.4.0 to 1.0.0 lead to every single web component using LitElement test to fail with the following error:
Any idea what might be the root cause of the issue and how to fix it?