Discussion on: Understanding the Modern Web Stack: Webpack - DevServer, React & Typescript

[Martin Green]

To build using "jsx": "preserve" you need your module configuration in webpack.config.js to look something like below. The key is having all the necessary loaders in the use array, in reverse order (as mentioned in the article), not having a separate rule for ts-loader as in the article. Otherwise they will not chain as expected. See webpack docs.

HTH

  module: {
    rules: [
      {
        test: /\.tsx$/i,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                ['@babel/preset-react', { runtime: 'automatic' }],
              ],
            },
          },
          { loader: 'ts-loader' },
        ],
      },
    ],
  },

[Kavinkumar R]

Thank you @mnemotic