Typescript compile error: @types/react/jsx-runtime"' has no exported member 'JSX' about overlayscrollbars HOT 12 CLOSED

Good day @wlyu2001 :)

Please post your tsconfig.json with which youre trying to compile your script via the tsc command

This issue aside, you shouldn't be compiling / type checking types in the node_modules folder... usually you should only type check / compile types in your app or project

from overlayscrollbars.

Here it is. 🙏

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noEmit": true,
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "module": "CommonJS",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "checkJs": true,
    "alwaysStrict": true,
    "downlevelIteration": true,
    "lib": ["esnext", "dom", "esnext.asynciterable"],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "*": ["pretend_modules/*", "*"]
    },
    "useUnknownInCatchVariables": false
  },
  "include": [
    "**/*.d.ts",
    "**/*.ts",
    "src/**/*.tsx",
    "hocs/**/*.tsx",
    "src/clients/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/dist",
    "**/__mocks__",
    "tools/tests/*"
  ],
  "references": [
    { "path": "./packages/react-components" }
  ]
}

from overlayscrollbars.

@wlyu2001 Please try to set react-jsx as the jsx value. As a last resort you could always set skipLibCheck to true.

from overlayscrollbars.

Thanks for the suggestions!

Unfortunately, "jsx": "react-jsx" gives the same error, and adding--skipLibCheck to CI seems to be too drastic and risky although it works. 😢

Do you have any other suggestions? 🙏

Is it very important to have import("react/jsx-runtime"). before JSX.Element? Without it, it compiles fine.

from overlayscrollbars.

@wlyu2001 The type definitions are generated automatically from tsc command - I don't really have an option to make optimizations there except for changing things in my tsconfig.json.

Can you please also post you package.json / your dependencies and devDependencies, maybe you're missing some types there.

from overlayscrollbars.

It's a huge list of dependencies. The only thing from your react example that we don't have is vite/vitejs.

from overlayscrollbars.

@wlyu2001 whats the versions of your react types? Maybe it helps to install the latest types for v17

from overlayscrollbars.

Hi, here are all the react related dependencies. Seems we are already on v17.

"dependencies": {
"react": "^17.0.2",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.0",
"react-error-boundary": "^1.2.5",
"react-highlighter": "^0.4.3",
"react-hotkeys": "^2.0.0",
"react-hover-observer": "^2.1.1",
"react-intersection-observer": "^9.4.0",
"react-measure": "^2.5.2",
"react-merge-refs": "^1.1.0",
"react-modal": "^3.13.1",
"react-notification-system": "^0.4.0",
"react-pdf": "~6.2.0",
"react-redux": "^7.2.3",
"react-router-dom": "^6.9.0",
"react-select": "^3.2.0",
"react-sortable-hoc": "^2.0.0",
"react-spring": "^8.0.27",
"react-tabs": "^3.2.2",
"react-tagsinput-special": "^1.6.0",
"react-tether": "^2.0.7",
"react-textarea-autosize": "^8.3.2",
"react-transition-group": "4.4.1",
"react-virtualized": "^9.22.3",
"react-virtualized-auto-sizer": "^1.0.22",
},
"devDependencies": {
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"@types/react-highlighter": "^0.3.4",
"@types/react-modal": "^3.13.1",
"@types/react-notification-system": "^0.2.40",
"@types/react-redux": "^7.1.16",
"@types/react-select": "^4.0.15",
"@types/react-tabs": "^2.3.2",
"@types/react-tagsinput": "^3.19.7",
"@types/react-textarea-autosize": "^4.3.5",
"@types/react-transition-group": "4.4.1",
"@types/react-virtualized": "^9.21.11",
"@babel/preset-react": "^7.18.6",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^7.0.2",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.6.0",
}

from overlayscrollbars.

@wlyu2001 After researching and a little bit of trial and error I've found a combination of types which preserves the functionality and compatibility. I've released overlayscrollbars-react v0.5.5 which should hopefully fix your issue :)

from overlayscrollbars.

Amazing! It passes the CI ✅ I will do some more tests, and let you know. Many thanks!

from overlayscrollbars.

@wlyu2001 Any news here? :)

from overlayscrollbars.

Hi @KingSora It works fine. We can close this. Thanks a lot for your support!

from overlayscrollbars.