title: Line 0: Parsing error: Cannot read property 'map' of undefined TypeScript React
body: <p>I was replacing an app created using React and JS with TypeScript using <code>ts migrate</code>, but the following error occurred in the file <code>App.tsx</code>.</p>
  <p><code>Line 0: Parsing error: Cannot read property 'map' of undefined</code></p>
  <p>The following is App.tsx</p>
  <pre><code>import React, { useState, useEffect, useCallback} from 'react';
  import './assets/styles/style.css';
  import {AnswersList, Chats} from './components/index';
  import FormDialog from './components/Forms/FormDialog';
  import {db} from './firebase/index';
  
  const App = () =&gt; {
    const [answers, setAnswers] = useState([]);
    const [chats, setChats] = useState([]);
    const [currentId, setCurrentId] = useState(&quot;init&quot;);
    const [dataset, setDataset] = useState({});
    const [open, setOpen] = useState(false);
  
    interface Dataset {
      &quot;answers&quot;: Array&lt;Answer&gt;,
      &quot;question&quot;: string
    }
  
    interface Answer {
      &quot;answers&quot;: [
        {&quot;content&quot;: string, &quot;nextId&quot;: string}
      ]
    }
  
  
    const displayNextQuestion = (nextQuestionId: string, nextDataset: Dataset) =&gt; {
      addChats({
        text: nextDataset.question,
        type: 'question'
      })
  
        setAnswers(nextDataset.answers)
        setCurrentId(nextQuestionId)
    }
  
    const selectAnswer = (selectedAnswer: any, nextQuestionId: any) =&gt; {
      switch(true) {
        case (nextQuestionId === 'contact'):
            handleClickOpen()
            break;
  
        case (/^https:*/.test(nextQuestionId)):
            const a = document.createElement('a');
            a.href = nextQuestionId;
            a.target = '_blank';
            a.click();
            break;
  
        default:
            addChats({
                text: selectedAnswer,
                type: 'answer'
            })
          setTimeout(() =&gt; displayNextQuestion(nextQuestionId, dataset[nextQuestionId]), 500) 
          break;
      }
    }
  
    const addChats = (chat: any) =&gt; {
      setChats((prevState) =&gt; {
        return [...prevChats, chat]
      })
    }
  
    const handleClickOpen = () =&gt; {
      setOpen(true)
    };
  
    const handleClose = useCallback(() =&gt; {
        setOpen(false)
    }, [setOpen]);
  
  
    useEffect(() =&gt; { 
      (async() =&gt; {
        const initDataset = {};
  
        await db.collection('questions').get().then(snapshots =&gt; {
          snapshots.forEach(doc =&gt; {
            const id = doc.id
            const data = doc.data()
            initDataset[id] = data
          })
        })
  
        setDataset(initDataset)
        displayNextQuestion(currentId, initDataset[currentId])
      })()
    }, [])
  
    useEffect(() =&gt; {
        const scrollArea = document.getElementById('scroll-area')
        if (scrollArea) {
          scrollArea.scrollTop = scrollArea.scrollHeight
        } 
    })
  
    return(
      &lt;section className=&quot;c-section&quot;&gt; 
        &lt;div className=&quot;c-box&quot;&gt;
          &lt;Chats chats={chats} /&gt;
          &lt;AnswersList answers={answers} select={selectAnswer} /&gt;
          &lt;FormDialog open={open} handleClose={handleClose} /&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>The following is <code>package.json</code></p>
  <pre><code>{
    &quot;name&quot;: &quot;chatbot&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.11.2&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;@material-ui/system&quot;: &quot;^4.11.2&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;@types/react&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.6&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.9.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.9.0&quot;,
      &quot;firebase&quot;: &quot;^7.24.0&quot;,
      &quot;react&quot;: &quot;^16.14.0&quot;,
      &quot;react-dom&quot;: &quot;^16.14.0&quot;,
      &quot;react-scripts&quot;: &quot;3.4.3&quot;
    },
    &quot;resolutions&quot;: {
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.1.1&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.1.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {},
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;ts-loader&quot;: &quot;^8.0.11&quot;,
      &quot;ts-migrate&quot;: &quot;^0.1.10&quot;,
      &quot;typescript&quot;: &quot;^4.1.2&quot;
    }
  }
  
  </code></pre>
  <p>When I was researching the error, I found <a href="https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined">this page</a>, so I tried it with reference to it, but it didn't change.</p>
  <p>By the way, here's what I tried</p>
  <ul>
  <li>Delete the node_modules file and install npm again</li>
  <li>Installing @typescript-eslint/eslint-plugin and @typescript-eslint/parser</li>
  </ul>
  <p>If you delete the description of the interface Dataset and interface Answer in <code>App.tsx</code>, the relevant error disappears. But another type of error occurs.</p>
  <p>I couldn't get a good hint by googling, so I asked this question.</p>
  <p>I would appreciate it if you could tell me the cause of this <code>Line 0: Parsing error: Cannot read property 'map' of undefined</code> and more.</p>