reactjstypescriptwebpackts-loader

Webpack5 ts-loader could not compile react files

Folder structure:

In the picture, the compiler says there is an issue that App refers to a value balabala. And when I run npm run serve, it failed too and not able to compile successfully. How to fix it?

enter image description here

webpack.config:

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.ts',
  output: {
    filename: 'js/build.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    open: true,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src'),
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My Test Webpack',
      template: './public/index.html'
    })
  ]
}

tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es6",
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "declaration": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noUnusedLocals": false,
    "removeComments": true,
    "strictNullChecks": false,
    "outDir": "./dist/",
    "preserveConstEnums": true,
    "noLib": false,
    "rootDirs": ["src", "test"],
    "lib": ["es6", "dom"]
  },
  "include": ["src/**/*"],
  "exclude": ["dist", "node_modules", "static"]
}

package.json

{
  "name": "webpack5test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "browserslist": "^4.17.5",
    "core-js": "^3.19.1",
    "file-loader": "^6.2.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "postcss": "^8.3.11",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "regenerator-runtime": "^0.13.9",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1"
  },
  "scripts": {
    "serve": "webpack serve",
    "build": "webpack --mode=development",
    "build:watch": "webpack --mode=development --watch"
  },
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/plugin-transform-arrow-functions": "^7.16.0",
    "@babel/plugin-transform-block-scoping": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.5.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack-dev-server": "^4.4.0"
  }
}
Solution

  • Your are trying to use jsx/tsx syntax in a regular typescript ts file. Rename the index.ts to index.tsx and then modify the entry in Webpack config to './src/index.tsx'.

    Alternately, if you want to keep using the .ts extension for your index.ts file, then manually create vDOM Element as:

    import * as React from 'react';

ReactDOM.render(
  React.createElement(App),
  document.getElementById('app'));