Typescript compile error: @types/react/jsx-runtime"' has no exported member 'JSX'

[wlyu2001]

Hi,

Thanks for this super useful library! I am currently using it in a react project (React version 17.0.2. Typescript version 5.2.2), pretty much in the same way as in the examples. It works perfectly in development environment, as well as production build bundled with webpack.

However in CI, when we run yarn tsc to compile for unit test, I get this error:

yarn run v1.22.18
$ /Users/project/node_modules/.bin/tsc
node_modules/overlayscrollbars-react/types/OverlayScrollbarsComponent.d.ts:24:220 - error TS2694: Namespace '"/Users/project/node_modules/@types/react/jsx-runtime"' has no exported member 'JSX'.

24 declare const OverlayScrollbarsComponent: <T extends keyof JSX.IntrinsicElements>(props: OverlayScrollbarsComponentBaseProps<T>, ref: React.ForwardedRef<OverlayScrollbarsComponentRef<T>>) => import("react/jsx-runtime").JSX.Element;
                                                                                                                                                                                                                              ~~~

Found 1 error in node_modules/overlayscrollbars-react/types/OverlayScrollbarsComponent.d.ts:24

In OverlayScrollbarsComponent.d.ts, JSX is kind of imported in an unusual way. Maybe some webpack preset can resolve it, but not ts compiler.

What could be the problem? Many thanks!!

[KingSora]

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

[wlyu2001]

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" }
  ]
}

[KingSora]

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

[wlyu2001]

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.

[KingSora]

@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.

[wlyu2001]

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

[KingSora]

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

[wlyu2001]

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", }

[KingSora]

@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 :)

[wlyu2001]

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

[KingSora]

@wlyu2001 Any news here? :)

[wlyu2001]

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