The dependent package has a dependency on @types/react, which causes a conflict.

[MTtankkeo]

When trying to use Preact with TypeScript in our project, we are encountering type errors related to JSX, specifically in the following component.

And, this issue seems to arise because one of our dependencies (react-widgets, which is located in ../packages/react-widgets) has a dependency on @types/react. This creates a conflict with our Preact setup, especially regarding JSX-related type definitions.

export function App() {
    return (
        <BrowserRouter>
            <Routes> /* <- Type Error */
                <Route path="*" Component={LandingPage} />
            </Routes>
        </BrowserRouter>
    )
}

package.json

{
  "scripts": {
    "build": "cross-env BUILD_TYPE=production webpack",
    "build:dev": "cross-env BUILD_TYPE=deveopment webpack",
    "watch": "cross-env BUILD_TYPE=production webpack --watch",
    "watch:dev": "cross-env BUILD_TYPE=deveopment webpack --watch",
    "dev": "cross-env BUILD_TYPE=development webpack-dev-server --hot"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "preact-svg-loader": "^0.2.1",
    "terser": "^5.31.6",
    "terser-webpack-plugin": "^5.3.10",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "dependencies": {
    "preact": "^10.23.2",
    "react-router": "^6.26.0",
    "react-router-dom": "^6.26.0",
    "react-widgets": "file:..\\packages\\react-widgets" <- devDependencies @types/react
  }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "ES2022",
        "target": "ES2015",
        "jsx": "react-jsx",
        "jsxImportSource": "preact",
        "moduleResolution": "Node",
        "allowJs": true,
    }
}

[rschristian]

Have you taken a look at our Aliasing in TypeScript docs? Usually that is the way to get this corrected.

[MTtankkeo]

I also need to set up the tsconfig, but it looks like I only configured the compatibility settings in the webpack config. That was my mistake in my rush. I'm sorry for that. Thank you for your quick response. I always appreciate your help!

[rschristian]

No problem at all, glad it helps!