Changing SPfx WebPart file to *.tsx

%3CLINGO-SUB%20id%3D%22lingo-sub-666333%22%20slang%3D%22en-US%22%3EChanging%20SPfx%20WebPart%20file%20to%20*.tsx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-666333%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENot%20sure%20if%20this%20is%20related%20to%20a%20version%20of%20the%20Spfx%20framework%2C%20or%20if%20Im%20just%20doing%20something%20wrong....I%20want%20to%20change%20the%20file%20created%20by%20the%20yeoman%20generator%20for%20a%20webpart%20to%20be%20a%20*.tsx%20(instead%20of%20*.ts)%20so%20that%20I%20can%20use%20JSV%20in%20its%20render%20method%20to%20wrap%20a%20call%20to%20a%20custom%20component%20(developed%20in%20another%20library)%20in%20a%20Redux%20Provider.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20done%20this%20in%20the%20past%20with%20no%20issue%2C%20but%20now%20when%20I%20change%20the%20file%20to%20tsx%20running%20%22gulp%20serve%22%20gives%20me%20errors%20as%20such%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%5B15%3A59%3A34%5D%20Error%20-%20%5Bwebpack%5D%20'dist'%3A%3CBR%20%2F%3EEntry%20module%20not%20found%3A%20Error%3A%20Can't%20resolve%20'C%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js'%20in%20'C%3A%5Csrc%5Capp-leasematrix'%3CBR%20%2F%3Eresolve%20'C%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js'%20in%20'C%3A%5Csrc%5Capp-leasematrix'%3CBR%20%2F%3Eusing%20description%20file%3A%20C%3A%5Csrc%5Capp-leasematrix%5Cpackage.json%20(relative%20path%3A%20.)%3CBR%20%2F%3EField%20'browser'%20doesn't%20contain%20a%20valid%20alias%20configuration%3CBR%20%2F%3Eafter%20using%20description%20file%3A%20C%3A%5Csrc%5Capp-leasematrix%5Cpackage.json%20(relative%20path%3A%20.)%3CBR%20%2F%3Eusing%20description%20file%3A%20C%3A%5Csrc%5Capp-leasematrix%5Cpackage.json%20(relative%20path%3A%20.%2Flib%2Fwebparts%2FleaseMatrix%2FLeaseMatrixWebPart.js)%3CBR%20%2F%3Eno%20extension%3CBR%20%2F%3EField%20'browser'%20doesn't%20contain%20a%20valid%20alias%20configuration%3CBR%20%2F%3EC%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js%20doesn't%20exist%3CBR%20%2F%3E.js%3CBR%20%2F%3EField%20'browser'%20doesn't%20contain%20a%20valid%20alias%20configuration%3CBR%20%2F%3EC%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js.js%20doesn't%20exist%3CBR%20%2F%3E.json%3CBR%20%2F%3EField%20'browser'%20doesn't%20contain%20a%20valid%20alias%20configuration%3CBR%20%2F%3EC%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js.json%20doesn't%20exist%3CBR%20%2F%3Eas%20directory%3CBR%20%2F%3EC%3A%5Csrc%5Capp-leasematrix%5Clib%5Cwebparts%5CleaseMatrix%5CLeaseMatrixWebPart.js%20doesn't%20exist%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChanging%20it%20back%20to%20*.ts%20(and%20pointing%20the%20render%20to%20the%20mock%20component%20created%20by%20the%20generator)%20and%20it%20works%20fine.%3C%2FP%3E%3CP%3EWhat%20do%20I%20need%20to%20do%20in%20order%20for%20webpack%20to%20be%20able%20to%20handle%20this%20file%20being%20tsx%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethankyou!!%3C%2FP%3E%3C%2FLINGO-BODY%3E
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