Reactjs Webpack抛出类型错误,但绑定正确
我正在用网页、巴别塔和打字脚本建立一个反应库。每当我构建webpack时,它都会成功绑定(我可以在另一个项目中使用代码而不会出错),并抛出如下类型的错误。是什么导致了这个错误Reactjs Webpack抛出类型错误,但绑定正确,reactjs,typescript,webpack,babeljs,eslint,Reactjs,Typescript,Webpack,Babeljs,Eslint,我正在用网页、巴别塔和打字脚本建立一个反应库。每当我构建webpack时,它都会成功绑定(我可以在另一个项目中使用代码而不会出错),并抛出如下类型的错误。是什么导致了这个错误 ERROR in C:\Users\janni\Documents\Dev\Titanom\Projects\Vicky\Brainix\TrainingCenterUI\src\components\common\buttons\icon-button\icon-button.component.tsx ./src/co
ERROR in C:\Users\janni\Documents\Dev\Titanom\Projects\Vicky\Brainix\TrainingCenterUI\src\components\common\buttons\icon-button\icon-button.component.tsx
./src/components/common/buttons/icon-button/icon-button.component.tsx 6:379-402
[tsl] ERROR in C:\Users\janni\Documents\Dev\Titanom\Projects\Vicky\Brainix\TrainingCenterUI\src\components\common\buttons\icon-button\icon-button.component.tsx(6,380)
TS2554: Expected 2 arguments, but got 1.
@ ./src/components/top-bar/top-bar.component.tsx 1:0-85 17:42-52
@ ./src/components/training-center-page/training-center-page.component.tsx 3:0-58 19:41-47
@ ./src/features/training-center-index/training-center-index.component.tsx 4:0-96 37:41-59
@ ./src/index.ts 1:0-89 1:0-89
通用网页包配置
const path = require("path");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin")
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
},
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
}
],
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: "style-loader"
},
{
test: /\.css$/i,
exclude: /node_modules/,
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]_[name]__[hash:base64:5]"
}
}
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: "asset/resource",
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg)$/i,
type: "asset/inline",
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
Components: path.resolve(__dirname, "..", "./src/components"),
Features: path.resolve(__dirname, "..", "./src/features"),
Models: path.resolve(__dirname, "..", "./src/models"),
Redux: path.resolve(__dirname, "..", "./src/redux"),
Util: path.resolve(__dirname, "..", "./src/util"),
Configurations: path.resolve(__dirname, "..", "./src/configurations"),
Tests: path.resolve(__dirname, "..", "./src/tests"),
}
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: true,
eslint: {
enabled: true,
files: "src/**"
}
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
}),
],
};
const path = require( "path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DtsBundleWebpack = require("dts-bundle-webpack");
module.exports = {
output: {
path: path.resolve(__dirname, "..", "dist"),
filename: "bundle.js",
library: "test",
libraryTarget: "umd",
umdNamedDefine: true
},
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new DtsBundleWebpack({
name: "training-center",
main: "dist/index.d.ts"
}),
],
externals: {
react: "react",
reactDOM: "react-dom",
reactI18next: "react-i18next"
}
};
生产网页包配置
const path = require("path");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin")
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
},
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
}
],
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: "style-loader"
},
{
test: /\.css$/i,
exclude: /node_modules/,
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]_[name]__[hash:base64:5]"
}
}
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: "asset/resource",
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg)$/i,
type: "asset/inline",
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
Components: path.resolve(__dirname, "..", "./src/components"),
Features: path.resolve(__dirname, "..", "./src/features"),
Models: path.resolve(__dirname, "..", "./src/models"),
Redux: path.resolve(__dirname, "..", "./src/redux"),
Util: path.resolve(__dirname, "..", "./src/util"),
Configurations: path.resolve(__dirname, "..", "./src/configurations"),
Tests: path.resolve(__dirname, "..", "./src/tests"),
}
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: true,
eslint: {
enabled: true,
files: "src/**"
}
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
}),
],
};
const path = require( "path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DtsBundleWebpack = require("dts-bundle-webpack");
module.exports = {
output: {
path: path.resolve(__dirname, "..", "dist"),
filename: "bundle.js",
library: "test",
libraryTarget: "umd",
umdNamedDefine: true
},
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new DtsBundleWebpack({
name: "training-center",
main: "dist/index.d.ts"
}),
],
externals: {
react: "react",
reactDOM: "react-dom",
reactI18next: "react-i18next"
}
};
(它们使用网页包合并进行合并)
巴别塔
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"declaration": true,
"esModuleInterop": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"Components/*": ["src/components/*"],
"Features/*": ["src/features/*"],
"Models/*": ["src/models/*"],
"Redux/*": ["src/redux/*"],
"Util/*": ["src/util/*"],
"Configurations/*": ["src/configurations/*"],
"Tests/*": ["src/tests/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
eslintrc
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"project": ["./tsconfig.json"]
},
"plugins": ["@typescript-eslint", "react-hooks"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": "off",
"indent": ["error", 2, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 2],
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/restrict-template-expressions": [
"error",
{
"allowNumber": false,
"allowBoolean": true,
"allowAny": true,
"allowNullish": true
}
]
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
}
}