Блог

Мне удалось добавить машинописный текст в свой проект React с помощью Webpack, но когда у меня возникает ошибка ввода, Webpack все равно компилируется. Например, здесь я присваиваю строку числовому значению, код Visual Studio указывает на ошибку, но Webpack все равно компилирует ее:

 let num: number = 123;  num = "Hello!!"; // lt;- Error, but webpack still compiles it.  export const App: FC = () =gt; {  return (  lt;divgt;  lt;h1gt;Welcome to React App!!!lt;/h1gt;  lt;/divgt;  ); };  

Когда возникает ошибка типа, я хочу, чтобы webpack не компилировал ее, поэтому, во-первых, ошибка должна быть устранена перед ее компиляцией, как я могу этого добиться? Это моя конфигурация:

package.json :

 {  "name": "react-webpack-template",  "version": "1.0.0",  "main": "index.js",  "license": "MIT",  "scripts": {  "prod::watch": "webpack --watch --mode production",  "dev::watch": "webpack --watch --mode development"  },  "devDependencies": {  "@babel/core": "^7.16.0",  "@babel/preset-env": "^7.16.4",  "@babel/preset-react": "^7.16.0",  "@babel/preset-typescript": "^7.16.0",  "@types/react": "^17.0.37",  "@types/react-dom": "^17.0.11",  "babel-loader": "^8.2.3",  "css-loader": "^6.5.1",  "mini-css-extract-plugin": "^2.4.5",  "style-loader": "^3.3.1",  "typescript": "^4.5.2",  "webpack": "^5.64.4",  "webpack-cli": "^4.9.1"  },  "dependencies": {  "@linaria/babel-preset": "^3.0.0-beta.13",  "@linaria/core": "^3.0.0-beta.13",  "@linaria/react": "^3.0.0-beta.13",  "@linaria/shaker": "^3.0.0-beta.13",  "react": "^17.0.2",  "react-dom": "^17.0.2"  } }  

babel.config.json :

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

tsconfig.json

 {  "compilerOptions": {  "target": "es2016",  "jsx": "react-jsx",  "module": "commonjs",  "moduleResolution": "node",   "removeComments": true,   "esModuleInterop": true,  "forceConsistentCasingInFileNames": true,   "strict": true,   "alwaysStrict": true,   "noImplicitOverride": true,  "skipLibCheck": true  },  "include": ["src/**/*", "src/*"],  "exclude": ["node_modules"] }  

and webpack.config.js :

 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { join } = require('path');  /** @type {import('webpack').Configuration} */ module.exports = {  entry: join(__dirname, 'src', 'index.tsx'),   output: {  path: join(__dirname, 'build'),  filename: '[name]/[name].js'  },   resolve: {  extensions: ['.js', '.ts', '.jsx', '.tsx']  },   devtool: 'source-map',   module: {  rules: [  {  test: /.t(s|sx)$/,  exclude: /node_modules/,  use: ['babel-loader']  },  {  test: /.css$/,  use: [MiniCssExtractPlugin.loader, 'css-loader']  },  {  type: 'assets',  test: /.(png|jpg|svg)$/  }  ]  },   plugins: [new MiniCssExtractPlugin()] };   

Я надеюсь, что вы сможете мне помочь 🙂