Do I need Babel if I want to support JavaScript in my TypeScript React project? (without CRA)

Question

The following code is my webpack config for my React project written in TypeScript,

module.exports = {
  mode: 'development',
  entry: ['./src/main.tsx'],
  module: {
    rules: [
      {
        // Only setup a rule for ts/tsx, but no rule for js/jsx yet.
        test: /\.tsx?$/,
        exclude: /(node_modules|\.webpack)/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
        },
      },
    ],
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
  },
  plugins: require('./webpack.plugins'),
  resolve: {
    extensions: ['.js', '.ts', '.json', '.jsx', '.tsx', '.css'],
    alias: {
      'react-dom': '@hot-loader/react-dom',
      ...require('./webpack.aliases'),
    },
  },
}

I have set the rule for ts & tsx extension, yet I haven't setup a js & jsx rule.

I'm wondering do I need to setup Babel config and a rule for js/jsx to load by babel-loader if I want to support both TypeScript & JavaScript in my React project which is not a CRA project?

Or, since I'm already seting up for a TypeScript project, can I just use ts-loader to load my js/jsx extensions?

Javascript is the language that babel/typescript is compiled to. You don't need ts-loader to load js, ts-loader loads typescript, hence the name. Have you tried just adding some js files? — Liam
– Liam, Commented Nov 4, 2022 at 15:21
@Liam I'm thinking by loading JS with ts-loader it forces the packed JS code to be compiled into the target version which I setup in the tsconfig. If I don't do any process to the JS source code, it might not be an acceptable version for older browser? — Bugman Huang
– Bugman Huang, Commented Nov 4, 2022 at 15:28
Your ts-loader is setup to only transpile ts(x) files, so it won't do anything to your js files — Liam
– Liam, Commented Nov 4, 2022 at 15:30
The problem is rather with jsx than with not supported features. It's hard to find unsupported commonly-used feature now when IE is dead — Konrad
– Konrad, Commented Nov 4, 2022 at 15:31
@KonradLinkowski oh yeah you're right! But can I load jsx by ts-loader? Or I'll have to set a rule for jsx to load by babel-loader? — Bugman Huang
– Bugman Huang, Commented Nov 4, 2022 at 15:36

Bugman Huang · Accepted Answer · 2022-11-07 15:02:56Z

1

I just found the TS conversion guide from Microsoft.

In short, they just directly pass js/jsx together with ts/tsx into the ts-loader pipeline since TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases.

module.exports = {
  ...
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  module: {
    rules: [
      { test: /\.(t|j)sx?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ }, // here
      { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "source-map-loader" }
    ]
  },
  ...
}

answered Nov 7, 2022 at 15:02

Bugman Huang

3511 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Do I need Babel if I want to support JavaScript in my TypeScript React project? (without CRA)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related