Блог

Я пытаюсь использовать react с midwayjs и webpack в typescript. Браузер выдает следующее исключение: Неперехваченная ошибка типа: s.Значение по умолчанию не определено, оно возвращает эту ошибку только в консоли моего браузера. Я не понимаю, почему отображается эта ошибка. Пожалуйста, помогите мне проверить, что может быть не так. Вот мой код:

пакет.json

 {  "dependencies": {  "@midwayjs/decorator": "^2.13.2",  "@midwayjs/web": "^2.13.4",  "chalk": "^4.1.2",  "egg": "^2.32.0",  "egg-webpack": "^5.0.1",  "midway": "^2.13.4",  "mini-css-extract-plugin": "^2.3.0",  "react": "^17.0.2",  "react-dom": "^17.0.2",  "tslib": "^2.3.1"  },  "devDependencies": {  "@babel/core": "^7.15.5",  "@babel/plugin-transform-runtime": "^7.15.0",  "@babel/preset-env": "^7.15.6",  "@babel/preset-react": "^7.14.5",  "@types/react": "^17.0.37",  "@types/react-dom": "^17.0.11",  "autoprefixer": "^10.3.6",  "awesome-typescript-loader": "^5.2.1",  "babel-loader": "^8.2.2",  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",  "clean-webpack-plugin": "^4.0.0",  "cross-env": "^6.0.0",  "css-loader": "^6.3.0",  "friendly-errors-webpack-plugin": "^1.7.0",  "html-webpack-plugin": "^5.3.2",  "midway-bin": "^1.20.3",  "postcss": "^8.3.8",  "postcss-loader": "^6.1.1",  "progress-bar-webpack-plugin": "^2.1.0",  "terser-webpack-plugin": "^5.2.4",  "webpack": "^5.56.0",  "webpack-cli": "^4.8.0",  "webpack-manifest-plugin": "^4.0.2"  },  "scripts": {  "dev": "cross-env NODE_ENV=local midway-bin dev --ts"  }, }  

webpack.config.js

 const chalk = require('chalk'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const { resolve } = require('path'); const TerserPlugin = require('terser-webpack-plugin'); const webpack = require('webpack'); const { WebpackManifestPlugin } = require('webpack-manifest-plugin');  module.exports = {  cache: {  type: 'filesystem',  },  devtool: 'source-map',  entry: {  demo: resolve(__dirname, './src/app/web/page/demo/app.tsx'),  },  externals: { React: 'React' },  mode: 'development',  module: {  noParse: /react.production.min.js$/,  rules: [  {  include: [resolve(__dirname, './src/app/web')],  test: /.css$/,  use: [  MiniCssExtractPlugin.loader,  'css-loader',  {  loader: 'postcss-loader',  options: {  postcssOptions: {  plugins: [require('autoprefixer')],  },  },  },  ],  },  {  include: resolve(__dirname, './src/app/web'),  test: /.tsx?$/,  use: [  {  loader: 'awesome-typescript-loader',  options: {  transpileOnly: true,  },  },  {  loader: 'babel-loader?cacheDirectory=true',  options: {  presets: [  '@babel/preset-env',  '@babel/preset-react',  ],  plugins: [  '@babel/plugin-transform-runtime',  [  'transform-react-remove-prop-types',  {  mode: 'wrap',  ignoreFilenames: ['node_modules'],  },  ],  ],  },  },  ],  },  ],  },  optimization: {  minimize: true,  minimizer: [  new TerserPlugin({  test: /.js$/,  }),  ],  runtimeChunk: true,  splitChunks: {  chunks: 'all',  hidePathInfo: true,  cacheGroups: {  vendor: {  test: /[\/]node_modules[\/]/,  name: 'vendor',  chunks: 'all',  enforce: true,  },  },  },  },  output: {  filename: '[name]_[chunkhash].js',  path: resolve(__dirname, './src/app/public'),  pathinfo: false,  publicPath: '/public',  },  performance: {  hints: false,  },  plugins: [  new CleanWebpackPlugin(),  new FriendlyErrorsWebpackPlugin(),  new HtmlWebpackPlugin({  chunks: ['demo'],  favicon: resolve(__dirname, './src/app/web/page/demo/blank.ico'),  inject: 'body',  filename: 'demo.html',  template: resolve(__dirname, './src/app/web/page/demo/index.html'),  }),  new MiniCssExtractPlugin({  filename: '[name]_[contenthash].css',  }),   new ProgressBarPlugin({  format:  ' build [:bar] '    chalk.green.bold(':percent')    ' (:elapsed seconds)',  }),  new webpack.HotModuleReplacementPlugin(),  new webpack.optimize.ModuleConcatenationPlugin(),  new WebpackManifestPlugin({  clearConsole: true,  }),  ],  resolve: {  symlinks: false,  extensions: ['.js', '.jsx', '.css', '.ts', '.tsx'],  },  stats: 'errors-only', };  

tsconfig.json

 {  "compilerOptions": {  "allowSyntheticDefaultImports": true,  "experimentalDecorators": true,  "jsx": "react",  "lib": [  "DOM",  "ESNext"  ],  "module": "CommonJS",  "target": "ESNext",  },  "exclude": [  "node_modules",  "webpack.config.js",  "app.js"  ] }  

приложение.tsx

 import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends Component {  render() {  return lt;pgt;demolt;/pgt;;  } } render(lt;App /gt;, document.getElementById('app'));