I am attempting to integrate TypeScript, react-templates, and webpack for a seamless workflow.
My starting point was the sample code provided at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html. The configuration in the webpack.config.js file looks like this:
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "./dist/bundle.js",
},
// More configurations...
};
In one of my files named Hello.tsx, I have included the following code snippet:
import * as React from "react";
// More code...
All necessary packages have been installed and running 'webpack' results in a successful application execution. However, upon trying to incorporate react-templates by adding additional loaders to the webpack.config.js, I encountered errors related to modules and unexpected tokens while extracting embedded HTML from other files like Hello.rt.
This made me investigate further on ways to harmoniously bring TypeScript, react-templates, and webpack together. Though I stumbled upon an example utilizing Grunt/browserify with react-templates and TypeScript, I prefer working with webpack. You can find the mentioned example on GitHub at https://github.com/bgrieder/react-templates-typescript-test.