CODEWITHSUNDEEP
reactjstypescriptjsxreact-new-window
aioobe
aioobe

Reputation: 421020

'NewWindow' cannot be used as a JSX component

I'm trying to open a new window in my react app. I've come across this nice library: react-new-window.

Even though I do exactly as the documentation says (I think) I get an error.

Here's my App.tsx from my SSCCE:

import React, {useState} from 'react';
import './App.css';
import NewWindow from "react-new-window";

function App() {
    const [isOpen, setOpen] = useState(false)
    return (
        <div className="App">
            <button onClick={() => setOpen(!isOpen)}>Open</button>
            { isOpen && <NewWindow>Hello!</NewWindow> }
        </div>
    );
}

export default App;

Here's my package.json if it matters:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0",
    "react-new-window": "0.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here's the error I get:

ERROR in src/App.tsx:10:26
TS2786: 'NewWindow' cannot be used as a JSX component.
  Its instance type 'NewWindow' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/alundblad/tmp/new-window-repro/my-app/node_modules/@testing-library/react/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
     8 |         <div className="App">
     9 |             <button onClick={() => setOpen(!isOpen)}>Open</button>
  > 10 |             { isOpen && <NewWindow>Hello!</NewWindow> }
       |                          ^^^^^^^^^
    11 |         </div>
    12 |     );
    13 | }

Am I doing something wrong? Is it a bug in the library?

I've found this codesandbox example that is working, but I can't figure out what's different from my code.

If I change to react 18 I get a slightly different error:

ERROR in src/App.tsx:10:26
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: INewWindowProps | Readonly<INewWindowProps>): NewWindow', gave the following error.
    Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<NewWindow> & Readonly<INewWindowProps>'.
  Overload 2 of 2, '(props: INewWindowProps, context: any): NewWindow', gave the following error.
    Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<NewWindow> & Readonly<INewWindowProps>'.
     8 |         <div className="App">
     9 |             <button onClick={() => setOpen(!isOpen)}>Open</button>
  > 10 |             { isOpen && <NewWindow>Hello!</NewWindow> }
       |                          ^^^^^^^^^
    11 |         </div>
    12 |     );
    13 | }

Upvotes: 0

Views: 260

Answers (1)

Liki Crus
Liki Crus

Reputation: 2062

It may happen by using incompatible dependencies in my experience.

I could sort it out by uninstalling and re-installing the doubtable packages one by one.

e.g. @testing-library/react 13.0 seems to require React 18 in its dependencies.

I could launch your app without testing libraries.

So please remove the following packages

    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",

And try to re-install. (I didn't test after installing them, but it should work)

These testing dependencies are correctly tested.

    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^14.1.0",

Upvotes: 1

Related Questions