SolidJS中返回JSX.Element的函数无法赋值给Component类型变量问题

我的IntelliJ IDEA会将App组件标记为「无法赋值给Component类型变量」，但代码实际可正常运行。我推测问题出在配置环节（仅参考官方文档配置，对配置细节不熟悉）。

观察到的现象 #

• 导入JSX后报错消失，但会触发「no-unused-vars」错误。
• 忽略错误后，应用能够正常构建并运行。
• 在ryansolid的webpack+TS示例仓库中，IDE也会显示完全相同的错误。

补充说明 #

1. index.tsx和App.tsx代码在默认Vite模板中可正常运行，代码本身无问题。
2. 用户snnsnn指出render方法的低级错误（已修改Index.tsx），但出现新的困惑问题：Argument type () => JSX.Element is not assignable to parameter type () => JSX.Element。

相关代码与配置文件 #

App.tsx #

import { Component, createSignal } from "solid-js";

const App: Component = () => {
  const [count, setCount] = createSignal<number>(0);
  return (
    <>
      <h1>Hello Stack Overflow {count()} times</h1>
      <button
        onClick={() => {
          setCount(count() + 1);
        }}
      >
        Say hello again
      </button>
    </>
  );
};

export default App;

index.tsx #

import { render } from "solid-js/web";
import App from "./App";

render(() => <App />, document.querySelector("#root"));

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:solid/typescript"
  ],
  "overrides": [
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "solid"
  ],
  "ignorePatterns": [
    "webpack.config.js"
  ],
  "rules": {
  }
}

.babelrc #

{
  "presets": [
    "solid",
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

package.json #

{
  "name": "solid-webpack-test",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "solid-js": "^1.7.3"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-typescript": "^7.21.4",
    "@typescript-eslint/eslint-plugin": "^5.59.1",
    "@typescript-eslint/parser": "^5.59.1",
    "babel-loader": "^9.1.2",
    "babel-preset-solid": "^1.7.3",
    "eslint": "^8.39.0",
    "eslint-plugin-solid": "~0.12.1",
    "html-webpack-plugin": "^5.5.1",
    "prettier": "^2.8.8",
    "typescript": "^5.0.4",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "esnext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

webpack.config.js #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
  entry: "./src/index.tsx",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    devMiddleware: {
      publicPath: "/",
    },
    port: 3000,
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

module.exports = config;

内容的提问来源于stack exchange，提问作者user21746010