Changing SPfx WebPart file to *.tsx

Contributor

Hi,

 

Not sure if this is related to a version of the Spfx framework, or if Im just doing something wrong....I want to change the file created by the yeoman generator for a webpart to be a *.tsx (instead of *.ts) so that I can use JSV in its render method to wrap a call to a custom component (developed in another library) in a Redux Provider.

 

I have done this in the past with no issue, but now when I change the file to tsx running "gulp serve" gives me errors as such:

 

[15:59:34] Error - [webpack] 'dist':
Entry module not found: Error: Can't resolve 'C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js' in 'C:\src\app-leasematrix'
resolve 'C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js' in 'C:\src\app-leasematrix'
using description file: C:\src\app-leasematrix\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\src\app-leasematrix\package.json (relative path: .)
using description file: C:\src\app-leasematrix\package.json (relative path: ./lib/webparts/leaseMatrix/LeaseMatrixWebPart.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js.json doesn't exist
as directory
C:\src\app-leasematrix\lib\webparts\leaseMatrix\LeaseMatrixWebPart.js doesn't exist

 

Changing it back to *.ts (and pointing the render to the mock component created by the generator) and it works fine.

What do I need to do in order for webpack to be able to handle this file being tsx?

 

thankyou!!

0 Replies