Can't resolve 'react/jsx-runtime' after updating to 0.9.0 version

[stud-mai]

🐛 Bug Report

After updating to the latest version of react-floater I am getting an error of inability to resolve 'react/jsx-runtime' module while starting a project.

Same issue with while bundling the project with rollup.

Same problem occurs on codesanbox demo (see link to repl section)

Issue might be resolved by updating React up to 18 version. In our case it is not acceptable. Moreover it is pointed in package json that React might be 16.8 - 18 version

Expected behavior

Project starts and bundles without errors

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/fervent-kapitsa-0lp53r?file=/src/components/WithHoverCustomDelay.tsx

Run npx envinfo --system --binaries --npmPackages react-floater

System:
  OS: macOS 12.6.7
  CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Memory: 61.11 MB / 16.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn: 1.22.4 - /usr/local/bin/yarn
  npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
npmPackages:
  react: 16.14.0 => 16.14.0 
  react-floater: 0.9.0 => 0.9.0 

[gilbarbara]

Hey @stud-mai

Fixed in v0.9.1

[stud-mai]

@gilbarbara thanks alot!

Unfortunately I still have problems with types in react-floater/dist/index.d.ts 😞

The first problem related to React probably might be resolved by updating @types/react package, however the second one no. I guess the root of that problem is fix-cjs-dts package, in particular this code. It's easily to reproduce same error in typescript playground. However I am not sure who is responsible to resolve this issue I would appreciate for any help!

[gilbarbara]

Hey @stud-mai The first error probably comes from the @types/react. However, the export = is required for the package to pass the type checking with attw, with this error. I had a similar problem with another package, for which I had to create custom types. Publishing hybrid CJS/ESM packages is a bloody mess! 😑

I'll take a look as soon as I can.

[gilbarbara]

Hey @stud-mai

Can you update the codesandbox and replicate the typescript error? Also, what's in your tsconfig? Do you have skipLibCheck enabled?

[stud-mai]

Hello @gilbarbara!

I have updated the codesandbox repo. As a result it has no typescript errors though I had to change react import from import { useState } from 'react' to import React from 'react' in index.tsx file due to an internal codesandbox error.

To be more precise regarding typescript error on my side - it appears only in vs code and during generating dts files by command npx tsc --emitDeclarationOnly. I use this package in an internal ui-kit package so we have to generate types as well.

Here's our tsconfig:

{
  "compilerOptions": {
    "outDir": "./build",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "baseUrl": "src",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "lib": [
      "es6",
      "es2015",
      "es2017",
      "dom",
      "ES2019",
      "DOM.Iterable"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": false,
    "pretty": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": true,
    "resolveJsonModule": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2016",
    "types": [
      "react",
      "jest",
      "node",
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "declarationDir": "build/npm/dts/src",
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "margin-vertical",
            "margin-horizontal",
            "padding-vertical",
            "padding-horizontal",
            "shadow-color",
            "shadow-opacity",
            "shadow-radius",
            "elevation"
          ]
        }
      }
    ]
  },
  "include": [
    "./src/**/*",
    "./typings/*",
    "./typings/**/*",
    "./typings/**/*.d.ts",
  ],
  "exclude": [
    "build",
    "tools",
    "*.flow.js",
    "*.flow"
  ]
}

Apparently we do not use skipLibCheck

[gilbarbara]

Hey @stud-mai It's "recommended" to turn this flag on since you can't control library code. Check this video for more information.

Anyway, I've updated the build process to "fix" that. You can try it by installing react-floater@next

[stud-mai]

Hey @gilbarbara!

Thanks for the "recommendation" but it seems if we choose this way there is no point in lib types at all (flow-type way 😅).

As for updated version react-floater@next - it works perfectly fine. Thanks!

[gilbarbara]

Cool.

The fix is in v0.9.2