How to use js/jsx files in a typescript+webpack project?

Question

I'm trying to import and use a regular .jsx file, located inside my typescript project built with webpack. I get this error:

ERROR in ./src/components/App/Test.jsx 72:4
Module parse failed: Unexpected token (72:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <span>
|       Search:{' '}
|       <input

The error message implies that I don't have a loader specified to handle jsx files. Fair enough, but which loader should I use? I tried both ts-loader to load the jsx files (which broke my project) and awesome-typescript-loader which didn't work either. I feel as though I've done the other things that are recommended:

• set "allowJs" to true in my tsconfig.json
• add .jsx files to the resolve part of my webpack config.
• define a rule (under module.rules) for /\.jsx?$/ files in my webpack config.

This is the relevant part of my webpack.config.js:

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.m?jsx?$/,
        resolve: {
          fullySpecified: false, // disable the behaviour
        },
      }
    ],
  },

  resolve: {
    extensions: [".tsx", ".ts", ".js",".jsx"],
    symlinks: true
  },

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",  
    "strict" : true,
    "esModuleInterop": true,
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true,        /* Disallow inconsistently-cased references to the same file. */
    /* Manual */
    "jsx" : "react",
    "allowJs": true
  }
}

Answer 1

you can add this for support .tsx,.jsx together webpack.config.js:

  {
    test: /\.(tsx|jsx|ts|js)?$/,
    use: "babel-loader",
    exclude: /node_modules/,
  }

and add this to .babelrc:

{
"presets": [
  "@babel/typescript", 
  "@babel/preset-env",
  ["@babel/preset-react", {"runtime": "automatic"}]
 ]
}

finally change package.json :

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack",
  "start": "serve dist"
}

Answer 2

I needed to put this into my webpack.config.js:

      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"]
          }
        },

Then I needed to run:

npm install --save-dev babel-core babel-loader babel-preset-react
npm install --save-dev @babel/preset-env @babel/preset-react