Fix: lwc compiler errors on .jsx/.tsx files #4164

SourabhMulay · 2024-04-20T07:17:13Z

Details

Fix: LWC compiler errors on .jsx/.tsx files #4122.
(Treating .jsx/.tsx file extensions the same as .js & .ts.)

Does this pull request introduce a breaking change?

😮‍💨 No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

🤞 No, it does not introduce an observable change.

salesforce-cla · 2024-04-20T07:17:19Z

Thanks for the contribution! Unfortunately we can't verify the commit author(s): Saurabh Mulay <s***@s***.i***.s***.com>. One possible solution is to add that email to your GitHub account. Alternatively you can change your commits to another email and force push the change. After getting your commits associated with your GitHub account, sign the Salesforce Inc. Contributor License Agreement and this Pull Request will be revalidated.

nolanlawson · 2024-04-22T16:56:13Z

Hi @SaurabhMulay999 thank you for the contribution! Could you please add a test to confirm the fix? The right place to add a test would be in transform-javascript.spec.ts. We just need to confirm that the new file extensions are handled correctly.

SourabhMulay · 2024-04-22T17:16:53Z

Hi @SaurabhMulay999 thank you for the contribution! Could you please add a test to confirm the fix? The right place to add a test would be in transform-javascript.spec.ts. We just need to confirm that the new file extensions are handled correctly.

Sure, I'll try.

SourabhMulay · 2024-04-23T13:50:21Z

Hi @nolanlawson ,
I have tried writing a unit test.

Code:

describe('transformFile function',()=>{
    it('should be tranform Typescript React file (.tsx)',()=>{
        const src=`import React from 'react'; \n const App=()=><div>Hello World</div>;`
        const fileName='app.tsx';
        const options={namespace:'c',name:'app'};
        const result=transformSync(src,fileName,options);
        expect(result.code).toBeDefined();
        expect(result.map).toBeDefined();
        expect(result.warnings).toBeUndefined();
        expect(result.cssScopeTokens).toBeUndefined();

    });

    it('should be tranform Typescript React file (.jsx)',()=>{
        const src=`import React from 'react'; \n const App=()=><div>Hello World</div>;`
        const fileName='app.jsx';

        const options={namespace:'c',name:'app'};
        const result=transformSync(src,fileName,options);
        expect(result.code).toBeDefined();
        expect(result.map).toBeDefined();
        expect(result.warnings).toBeUndefined();
        expect(result.cssScopeTokens).toBeUndefined();

    });
});

after debug it was failing saying that.

Error:
Support for the experimental syntax 'jsx' isn't currently enabled.qq

I have checked some online resources it was suggesting to install @babel/preset-react.

nolanlawson · 2024-04-23T15:39:44Z

@SaurabhMulay999 It should be fine to just put actual JavaScript in there rather than JSX.

We do not need to test transpiling JSX into JavaScript; just that the .jsx/.tsx extensions are supported.

In a real app setup (e.g. using Rollup), the consumer of LWC would be responsible for ensuring that there are plugins in place to do the transformation.

SourabhMulay · 2024-04-23T15:58:31Z

@SaurabhMulay999 It should be fine to just put actual JavaScript in there rather than JSX.

We do not need to test transpiling JSX into JavaScript; just that the .jsx/.tsx extensions are supported.

In a real app setup (e.g. using Rollup), the consumer of LWC would be responsible for ensuring that there are plugins in place to do the transformation.

Okay. I've added the JS format. I have ran it locally it was successful. Let me know if any modifications are required.

nolanlawson · 2024-04-23T16:18:00Z

@SaurabhMulay999 Could you please sign the CLA as described above?

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

nolanlawson · 2024-04-23T16:21:14Z

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

+        import { LightningElement } from 'lwc';
+        export default class Foo extends LightningElement {}
+        `;
+        const fileName = 'app.js';


Suggested change

const fileName = 'app.js';

const fileName = 'app.jsx';

SourabhMulay · 2024-04-23T16:39:47Z

@SaurabhMulay999 Could you please sign the CLA as described above?

Hey @nolanlawson,
I don't know what is the issue but previously i already have signed the cla. that site redirect me and shows that, that i already have signed the cla. but this time system failed to verify my email. is there any workaround? like to re sign it.

wjhsf · 2024-04-23T16:53:18Z

Commit authors must be associated with GitHub users

I think you'll have to redo the commits using the email address associated with your GitHub account. (Or add the email address from your commits to your GitHub account, but the one used here doesn't seem to be a real email address, so I don't think GitHub will let you.)

ekashida

It would be nice to loop over an array of all the supported file extensions. Something like:

    describe('file extension support', () => {
        function testFileExtensionSupport(ext: string) {
            it(`should support ${ext} file extension`, () => {
                const src = `
                    import { LightningElement } from 'lwc';
                    export default class Foo extends LightningElement {}
                `;
                const options = { namespace: 'c', name: 'foo' };
                const result = transformSync(src, `foo${ext}`, options);
                expect(result.code).toBeDefined();
                expect(result.map).toBeDefined();
                expect(result.warnings).toBeUndefined();
                expect(result.cssScopeTokens).toBeUndefined();
            });
        }
        ['.js', '.jsx', '.ts', '.tsx'].forEach(testFileExtensionSupport);
    });

ekashida · 2024-04-23T16:55:46Z

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

@@ -269,3 +269,34 @@ describe('sourcemaps', () => {
        });
    });
 });
+
+describe('transformFile function', () => {


Suggested change

describe('transformFile function', () => {

describe('file extension support', () => {

I think it's better as you have suggested above to loop over all the extensions.

ekashida · 2024-04-23T16:56:29Z

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

@@ -269,3 +269,34 @@ describe('sourcemaps', () => {
        });
    });
 });
+
+describe('transformFile function', () => {
+    it('should be tranform Typescript file with ext (.tsx)', () => {


Suggested change

it('should be tranform Typescript file with ext (.tsx)', () => {

it('should support .tsx file extension', () => {

ekashida · 2024-04-23T16:57:04Z

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

+        expect(result.cssScopeTokens).toBeUndefined();
+    });
+
+    it('should be tranform Javascript file with ext (.jsx)', () => {


Suggested change

it('should be tranform Javascript file with ext (.jsx)', () => {

it('should support .jsx file extension', () => {

SourabhMulay · 2024-04-23T17:08:47Z

Commit authors must be associated with GitHub users

I think you'll have to redo the commits using the email address associated with your GitHub account. (Or add the email address from your commits to your GitHub account, but the one used here doesn't seem to be a real email address, so I don't think GitHub will let you.)

I think it tried to fetch my official salesforce email. I'll try adding the personal email and then recommit.

wjhsf · 2024-04-23T17:29:16Z

I think it tried to fetch my official salesforce email. I'll try adding the personal email and then recommit.

If you use your salesforce email then you don't need to sign the CLA, because it will recognize you as an internal user.

SourabhMulay · 2024-04-23T17:32:40Z

I think it tried to fetch my official salesforce email. I'll try adding the personal email and then recommit.
If you use your salesforce email then you don't need to sign the CLA, because it will recognize you as an internal user.

Yeah, but this is my personal account. I have added the Name as well email in the latest commit. It should have now recognise me as a GitHub user.

ekashida

lgtm!

nolanlawson · 2024-04-23T17:50:42Z

Yeah, but this is my personal account. I have added the Name as well email in the latest commit. It should have now recognise me as a GitHub user.

The older commits still show the invalid email address. I believe you will need to do an interactive rebase or squash-merge followed by a force-push to fix this.

SourabhMulay · 2024-04-23T18:07:07Z

Yeah, but this is my personal account. I have added the Name as well email in the latest commit. It should have now recognise me as a GitHub user.

The older commits still show the invalid email address. I believe you will need to do an interactive rebase or squash-merge followed by a force-push to fix this.

Okay. I'll try interactive rebase.

fix:lwc compiler errors on jsx tsx files fix: lwc compiler errors on jsx tsx files fix: lwc compiler errors on jsx tsx files fix: lwc compiler errors on jsx tsx files (unit tests) fix: lwc compiler errors on jsx tsx files (unit tests) fix: unit test code formating changes fix: unit test code formating changes fix: unit test code formating changes fix: unit test code formating changes fix: lwc compiler errors on jsx tsx files

SourabhMulay · 2024-04-24T05:08:12Z

Yeah, but this is my personal account. I have added the Name as well email in the latest commit. It should have now recognise me as a GitHub user.

The older commits still show the invalid email address. I believe you will need to do an interactive rebase or squash-merge followed by a force-push to fix this.

Hi @nolanlawson ,
I have changed the commit author for all the commits. and also have squashed (2 to N) commits together. Thanks for the suggestion, I have learned a lot.

nolanlawson · 2024-04-24T17:00:09Z

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts

+            expect(result.cssScopeTokens).toBeUndefined();
+        });
+    }
+    ['.js', '.jsx', '.ts', '.tsx'].forEach(testFileExtensionSupport);


nolanlawson · 2024-04-24T17:30:25Z

/nucleus test

SourabhMulay requested a review from a team as a code owner April 20, 2024 07:17

salesforce-cla bot added the cla:missing label Apr 20, 2024

nolanlawson mentioned this pull request Apr 22, 2024

[DO NOT MERGE] Trigger CI for #4164: Fix: lwc compiler errors on .jsx/.tsx files #4166

Closed

nolanlawson mentioned this pull request Apr 23, 2024

[DO NOT MERGE] Trigger CI for #4164: Fix: lwc compiler errors on .jsx/.tsx files #4169

Closed

nolanlawson reviewed Apr 23, 2024

View reviewed changes

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts Outdated Show resolved Hide resolved

nolanlawson reviewed Apr 23, 2024

View reviewed changes

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts Outdated Show resolved Hide resolved

nolanlawson reviewed Apr 23, 2024

View reviewed changes

packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts Outdated Show resolved Hide resolved

nolanlawson reviewed Apr 23, 2024

View reviewed changes

wjhsf closed this Apr 23, 2024

wjhsf reopened this Apr 23, 2024

ekashida reviewed Apr 23, 2024

View reviewed changes

SourabhMulay requested a review from ekashida April 23, 2024 17:29

ekashida approved these changes Apr 23, 2024

View reviewed changes

nolanlawson mentioned this pull request Apr 23, 2024

[DO NOT MERGE] Trigger CI for #4164: Fix: lwc compiler errors on .jsx/.tsx files #4170

Closed

SourabhMulay force-pushed the Saurabh/Fix-compiler-error-on-jsx/tsx-files branch from b60432e to 84af21a Compare April 24, 2024 04:54

salesforce-cla bot removed the cla:missing label Apr 24, 2024

salesforce-cla bot added the cla:signed label Apr 24, 2024

SourabhMulay added 2 commits April 24, 2024 10:31

fix: modified the unit test

f95a6ef

SourabhMulay force-pushed the Saurabh/Fix-compiler-error-on-jsx/tsx-files branch from 84af21a to f95a6ef Compare April 24, 2024 05:03

nolanlawson mentioned this pull request Apr 24, 2024

[DO NOT MERGE] Trigger CI for #4164: Fix: lwc compiler errors on .jsx/.tsx files #4171

Closed

nolanlawson reviewed Apr 24, 2024

View reviewed changes

nolanlawson approved these changes Apr 24, 2024

View reviewed changes

nolanlawson merged commit c0a565b into salesforce:master Apr 24, 2024
10 checks passed

nolanlawson mentioned this pull request Apr 24, 2024

LWC compiler errors on .jsx/.tsx files #4122

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: lwc compiler errors on .jsx/.tsx files #4164

Fix: lwc compiler errors on .jsx/.tsx files #4164

SourabhMulay commented Apr 20, 2024

salesforce-cla bot commented Apr 20, 2024

nolanlawson commented Apr 22, 2024

SourabhMulay commented Apr 22, 2024

SourabhMulay commented Apr 23, 2024 •

edited

nolanlawson commented Apr 23, 2024 •

edited

SourabhMulay commented Apr 23, 2024

nolanlawson commented Apr 23, 2024

nolanlawson Apr 23, 2024

SourabhMulay commented Apr 23, 2024 •

edited

wjhsf commented Apr 23, 2024

ekashida left a comment

ekashida Apr 23, 2024

SourabhMulay Apr 23, 2024

ekashida Apr 23, 2024

ekashida Apr 23, 2024

SourabhMulay commented Apr 23, 2024

wjhsf commented Apr 23, 2024 •

edited

SourabhMulay commented Apr 23, 2024

ekashida left a comment

nolanlawson commented Apr 23, 2024

SourabhMulay commented Apr 23, 2024

SourabhMulay commented Apr 24, 2024

nolanlawson Apr 24, 2024

nolanlawson commented Apr 24, 2024

	describe('transformFile function', () => {
	describe('file extension support', () => {

	it('should be tranform Typescript file with ext (.tsx)', () => {
	it('should support .tsx file extension', () => {

	it('should be tranform Javascript file with ext (.jsx)', () => {
	it('should support .jsx file extension', () => {

Fix: lwc compiler errors on .jsx/.tsx files #4164

Fix: lwc compiler errors on .jsx/.tsx files #4164

Conversation

SourabhMulay commented Apr 20, 2024

Details

Does this pull request introduce a breaking change?

Does this pull request introduce an observable change?

salesforce-cla bot commented Apr 20, 2024

nolanlawson commented Apr 22, 2024

SourabhMulay commented Apr 22, 2024

SourabhMulay commented Apr 23, 2024 • edited

nolanlawson commented Apr 23, 2024 • edited

SourabhMulay commented Apr 23, 2024

nolanlawson commented Apr 23, 2024

nolanlawson Apr 23, 2024

Choose a reason for hiding this comment

SourabhMulay commented Apr 23, 2024 • edited

wjhsf commented Apr 23, 2024

ekashida left a comment

Choose a reason for hiding this comment

ekashida Apr 23, 2024

Choose a reason for hiding this comment

SourabhMulay Apr 23, 2024

Choose a reason for hiding this comment

ekashida Apr 23, 2024

Choose a reason for hiding this comment

ekashida Apr 23, 2024

Choose a reason for hiding this comment

SourabhMulay commented Apr 23, 2024

wjhsf commented Apr 23, 2024 • edited

SourabhMulay commented Apr 23, 2024

ekashida left a comment

Choose a reason for hiding this comment

nolanlawson commented Apr 23, 2024

SourabhMulay commented Apr 23, 2024

SourabhMulay commented Apr 24, 2024

nolanlawson Apr 24, 2024

Choose a reason for hiding this comment

nolanlawson commented Apr 24, 2024

SourabhMulay commented Apr 23, 2024 •

edited

nolanlawson commented Apr 23, 2024 •

edited

SourabhMulay commented Apr 23, 2024 •

edited

wjhsf commented Apr 23, 2024 •

edited