LWC compiler errors on `.jsx`/`.tsx` files

[Nolan Lawson]

Description

The @lwc/compiler throws an error if there is a .jsx/.tsx file in your module graph, even if it's already been transformed into valid JS by some other tool.

We should probably just treat these file extensions the same as .js, similar to what we do for .ts files.

Steps to Reproduce

[Repro](Error: LWC1005: No available transformer for "/home/projects/salesforce-lwc-rqpuuh/src/react/hello.jsx")

Expected Results

No error is thrown

Actual Results

Error is thrown:

[!] (plugin rollup-plugin-lwc-compiler) Error: LWC1005: No available transformer for "/home/projects/salesforce-lwc-rqpuuh/src/react/hello.jsx"
src/react/hello.jsx
    at new CompilerError (/home/projects/salesforce-lwc-rqpuuh/node_modules/@lwc/errors/dist/index.cjs.js:53:9)
    at Object.generateCompilerError (/home/projects/salesforce-lwc-rqpuuh/node_modules/@lwc/errors/dist/index.cjs.js:1315:19)
    at transformFile (/home/projects/salesforce-lwc-rqpuuh/node_modules/@lwc/compiler/dist/index.cjs.js:478:26)
    at Object.transformSync (/home/projects/salesforce-lwc-rqpuuh/node_modules/@lwc/compiler/dist/index.cjs.js:458:12)
    at Object.transform (/home/projects/salesforce-lwc-rqpuuh/node_modules/@lwc/rollup-plugin/dist/index.cjs.js:286:54)
    at eval (/home/projects/salesforce-lwc-rqpuuh/node_modules/rollup/dist/shared/rollup.js:998:40)

The error comes from here:

lwc/packages/@lwc/compiler/src/transformers/transformer.ts

Lines 129 to 133 in 8a0f98f

 default: 
     throw generateCompilerError(TransformerErrors.NO_AVAILABLE_TRANSFORMER, { 
         messageArgs: [filename], 
         origin: { filename }, 
     }); 

We should probably add the file extensions here:

lwc/packages/@lwc/compiler/src/transformers/transformer.ts

Lines 124 to 125 in 8a0f98f

 case '.ts': 
 case '.js': 

[Nolan Lawson]

Alternatively, we could have @lwc/rollup-plugin just not route .jsx/.tsx files to @lwc/compiler, since @lwc/compiler doesn't need to compile them anyway. (They cannot possibly be LWC components.)

[Saurabh_]

hey @nolanlawson ,
I have tried fixing it by just checking the file extensions and returning early if file extensions are either .jsx/.tsx. I am not sure whether it'll introduce a breaking changes or not. Can you please verify?

[Nolan Lawson]

Hi @SaurabhMulay999 thanks for the contribution! However, this fix needs to be made inside of @lwc/compiler, not @lwc/rollup-plugin. The Rollup plugin uses the @lwc/compiler under the hood, but there are other consumers of the compiler (e.g. Webpack, LWR).

As mentioned above, I think the simplest fix would be to add the extensions here. It is not ideal, since .jsx/.tsx files are unlikely to need LWC component transformations, and it will assume that someone has set up a tool earlier in the processing pipeline to convert these files into JS, but it seems like the most expedient solution to me.

[Saurabh_]

Thanks @nolanlawson for the details. I'll try what you have suggested. Is there any open doc maintained to get idea of whole project? It would be helpful.

[Nolan Lawson]

Sure, I would recommend reading CONTRIBUTING.md.

[Nolan Lawson]

Fixed by #4164