Is there a guide of some kind or possibly some helpful information floating around regarding the addition of typescript in a Sitecore JSS react boilerplate project?
So far I've only been able to get component code (src/components) to compile during local disconnected development - which is basically just relying on create-react-app which recognizes the ts/tsx extensions. I'm not able to get a prod build to work at all.
We'd like to:
- Write our react component code in typescript
- Write our Sitecore definition/manifest files in typescript
- Write root-level scripts in typescript (
AppRoot,dataFetcher, etc.)
I have found a few articles wherein people show a basic setup that compiles component typescript files but those examples are only for the component code and, in all cases, the prod build fails. The failure is caused by path/file loading when a js file attempts to import a ts file.
I'm assuming this is caused somewhere in the chaos of the create-react-app blackbox and the custom webpack configuration for SSR bundling. It's difficult to actually determine what is doing what between local compilation and prod build.
I've tried modifying the server.webpack.config.js file to utilize ts-loader for ts and tsx files but the result is the same. This is the approach I'm most familiar with as I've used it on many other projects. Of course, this would only solve the SSR bundling (I think??)
I've also tried adding @babel/preset-typescript to sitecore/definitions/config.js but that seems to have no affect at all.
Any help would be much appreciated. My last resort would be to start an empty create-react-app --typescript project and try to re-implement the sitecore-jss scripts and configs. I would really like to avoid that.
