Почему мое свойство объекта JavaScript недоступно, если оно действительно определено?

Question

Вот объект.Это объект второго уровня в дереве данных:

user: {
  userId: 3,
  username: 'aragorn',
},

Мой компонент React выполняет деструктуризацию своего родительского объекта и делает его доступным для всего компонента.Когда я рендерим полный пользовательский объект , используя этот код:

<p className="small">
  {`Submitted by ${JSON.stringify(user)}`}
</p>

, я получаю полный строковый объект со всеми пользовательскими свойствами:

Когда я пытаюсь получить доступ только к свойству 'username' из объекта 'user':

<p className="small">
  {`Submitted by ${JSON.stringify(user.username)}`}
</p>

Я получаю эту ошибку:

Вы когда-нибудь сталкивались с этой странной проблемой раньше?

Для дальнейшего изучения, вот полный объект данных.Это происходит из фиктивного объекта данных, экспортируемого из соседнего файла в том же приложении.Никаких сетевых запросов к бэкэнду или чему-либо еще, поэтому здесь не должно происходить никаких асинхронных операций (я могу ошибаться):

{
title: "The Hefalump's Tale",
page: '32',
line: '1',
author: 'Joni E. Driskill',
genre: 'Sci-fi',
type: 'Motivational',
content: 'The grass is greener on the other side, unless, in actuality and reality, it is not. I guess in that case, you can just give up on anything nice in life.',
claps: 23,
id: 4,
user: {
  userId: 3,
  username: 'aragorn',
},
comments: [
  {
    commentId: 0,
    quoteId: 0,
    content: 'Comment content',
    userId: 'userId',
    claps: 2,
    date: 2,
  },
  {
    commentId: 1,
    quoteId: 1,
    content: 'Comment content',
    userId: 'userId',
    claps: 4,
    date: 1,
  },
  {
    commentId: 2,
    quoteId: 2,
    content: 'Comment content',
    userId: 'userId',
    claps: 12,
    date: 0,
  },
],

},

И ЗДЕСЬ мой Реакткомпонент, называемый «Мета», приносящий объект «цитата» в качестве опоры.Основная линия, о которой идет речь, направлена ​​вниз, но вы также можете посмотреть на мою деструктуризацию реквизита, если хотите:

import React from 'react';
import Clap from '../mechanics/Clap';
import Report from '../mechanics/Report';

const Meta = ({
  quote: {
    content,
    title,
    author,
    page,
    line,
    genre,
    type,
    claps,
    id,
    user,
  },
}) => (
  <div className="discussion-meta mb2">
    <h1>&ldquo;{content}&rdquo;</h1>
    <hr />
    <div className="columns is-spaced-around pb3 text-align-left">
      <div className="column">
        <h3>{title}</h3>
        <p>
          <small>by {author}</small>
        </p>
        {page ?
          <p>
            <small>page {page}{line ? `, line ${line}` : ''}</small>
          </p>
          : null
        }
      </div>
      <div className="column text-align-right">
        <p>
          <span className="tag-purple small">{genre}</span>
        </p>
        <p>
          <span className="tag-green small">{type}</span>
        </p>
      </div>
    </div>
    <div className="columns">
      <div className="column">
        <p className="small">
          {`Submitted by ${JSON.stringify(user.username)}`}
        </p>
      </div>
    </div>
    <div className="columns">
      <div className="column">
        <Clap claps={claps} />
      </div>
      <div className="column">
        <Report id={id} />
      </div>
    </div>
  </div>
);

export default Meta;

Я воссоздал в CodeSandbox, и он работает!WTF!https://codesandbox.io/s/4q9nlywl1x