;
diff --git a/test/karma/test-app/static-members/README.md b/test/karma/test-app/static-members/README.md
new file mode 100644
index 00000000000..7e6a8a03c6d
--- /dev/null
+++ b/test/karma/test-app/static-members/README.md
@@ -0,0 +1,26 @@
+This test suite is focused on ensuring that component's with static class fields compiles correctly.
+With TypeScript v5.0, exported classes with static exports would be compiled as:
+```ts
+class StaticMembers {};
+StaticMembers.property = '';
+StaticMembers.anotherProperty = '';
+export { StaticMembers };
+```
+
+However, Stencil would also inject the `export` keyword in front of the class declaration, resulting in two exports:
+```ts
+export class StaticMembers {};
+StaticMembers.property = '';
+StaticMembers.anotherProperty = '';
+export { StaticMembers }; // 2 exports causes an error!
+```
+
+Which produces an error when we get to the rollup stage:
+```console
+[ ERROR ] Rollup: Parse Error: ./test-app/static-members/cmp.tsx:35:9
+ Duplicate export 'StaticMembers' (Note that you need plugins to import files that are not JavaScript) at
+ ... (elided) ...
+```
+See: https://github.com/ionic-team/stencil/issues/4424 for more information
+See: https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBAYwDYEMDOa4GUYpgSwQFlgBbAI2CkwG8BYAKDjjVwITjCgjCpgE84AXjgAmANyMAvkA
+for a TS playground reproduction of the `export` keyword being moved around
\ No newline at end of file
diff --git a/test/karma/test-app/static-members/index.html b/test/karma/test-app/static-members/index.html
new file mode 100644
index 00000000000..1438519ea4d
--- /dev/null
+++ b/test/karma/test-app/static-members/index.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/test/karma/test-app/static-members/karma.spec.ts b/test/karma/test-app/static-members/karma.spec.ts
new file mode 100644
index 00000000000..8b4273aa4e9
--- /dev/null
+++ b/test/karma/test-app/static-members/karma.spec.ts
@@ -0,0 +1,29 @@
+import { setupDomTests } from '../util';
+
+describe('static-members', function () {
+ const { setupDom, tearDownDom } = setupDomTests(document);
+ let app: HTMLElement;
+
+ beforeEach(async () => {
+ app = await setupDom('/static-members/index.html');
+ });
+ afterEach(tearDownDom);
+
+ it('renders properly with initialized static members', async () => {
+ const cmp = app.querySelector('static-members');
+
+ expect(cmp.textContent.trim()).toBe('This is a component with static public and private members');
+ });
+
+ it('renders properly with a separate export', async () => {
+ const cmp = app.querySelector('static-members-separate-export');
+
+ expect(cmp.textContent.trim()).toBe('This is a component with static public and private members');
+ });
+
+ it('renders properly with a static member initialized outside of a class', async () => {
+ const cmp = app.querySelector('static-members-separate-initializer');
+
+ expect(cmp.textContent.trim()).toBe('This is a component with static an externally initialized member');
+ });
+});
diff --git a/test/karma/test-app/static-members/static-members-separate-export.tsx b/test/karma/test-app/static-members/static-members-separate-export.tsx
new file mode 100644
index 00000000000..f0cb644648e
--- /dev/null
+++ b/test/karma/test-app/static-members/static-members-separate-export.tsx
@@ -0,0 +1,22 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+ tag: 'static-members-separate-export',
+})
+class StaticMembersWithSeparateExport {
+ /**
+ * See the spec file associated with this file for the motivation for this test
+ */
+ static property = 'public';
+ private static anotherProperty = 'private';
+
+ render() {
+ return (
+
+ This is a component with static {StaticMembersWithSeparateExport.property} and{' '}
+ {StaticMembersWithSeparateExport.anotherProperty} members
+
+ );
+ }
+}
+export { StaticMembersWithSeparateExport };
diff --git a/test/karma/test-app/static-members/static-members-separate-initializer.tsx b/test/karma/test-app/static-members/static-members-separate-initializer.tsx
new file mode 100644
index 00000000000..7ab23452d09
--- /dev/null
+++ b/test/karma/test-app/static-members/static-members-separate-initializer.tsx
@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+ tag: 'static-members-separate-initializer',
+})
+export class StaticMembersWithSeparateInitializer {
+ /**
+ * See the spec file associated with this file for the motivation for this test
+ */
+ static property: string;
+ render() {
+ return This is a component with static an {StaticMembersWithSeparateInitializer.property} member
;
+ }
+}
+StaticMembersWithSeparateInitializer.property = 'externally initialized';
diff --git a/test/karma/test-app/static-members/static-members.tsx b/test/karma/test-app/static-members/static-members.tsx
new file mode 100644
index 00000000000..c219b237879
--- /dev/null
+++ b/test/karma/test-app/static-members/static-members.tsx
@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+ tag: 'static-members',
+})
+export class StaticMembers {
+ /**
+ * See the spec file associated with this file for the motivation for this test
+ */
+ static property = 'public';
+ private static anotherProperty = 'private';
+
+ render() {
+ return (
+
+ This is a component with static {StaticMembers.property} and {StaticMembers.anotherProperty} members
+
+ );
+ }
+}