Skip to content

(Issue with typescript) TypeError: Converting circular structure to JSON #11582

Closed
@icecream17

Description

@icecream17

Describe the bug

If for some reason, you type props as null and return null in render

// Null.tsx
import React from "react";

export default class Null extends React.Component<null> {
   render() {
      return null
   }
}

and then use that component with children (implicitly sets this.props.children):

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Null from './Null';

ReactDOM.render(
  <React.StrictMode>
    <Null>
      <App />
    </Null>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

the resulting error crashes npm start

Did you try recovering your dependencies?

(Write your answer here.)

my-ts-app-2: npm --version gets 8.1.1
solver: yarn --version gets 3.0.2

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

PS C:\Users\Steven\Documents\code\js\sudoku\my-ts-app-2> npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0-next.47+1465357b
  running from C:\Users\Steven\Documents\code\js\sudoku\my-ts-app-2\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
  Binaries:
    Node: 16.11.1 - C:\Program Files\nodejs\node.EXE    
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.30)
    Internet Explorer: Not Found
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0-next.47 => 5.0.0-next.47+1465357b
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
  2. cd my-ts-app
  3. In the src folder, create Null.tsx as shown above and edit index.tsx as shown above

Expected behavior

(Write what you thought would happen.)

Errors but doesn't crash typescript itself

Actual behavior

I don't think typescript is supposed to crash

(Write what happened. Please add screenshots!)

Before typing props as null
image

After
image

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

icecream17/my-ts-app-2@9aa67c5

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions