Блог

Ошибка

Что ж, прошло уже несколько часов, я пытаюсь выяснить, почему я получил эту ошибку (только при запуске сборки). :

Архитектура

 Current directory is MySuperProject/src/Components/
Other non usefull files and directories are omitted.
.
├── Rentals                             
│   ├── modals
│   │   └── AddRentalModal.js            Not usefull here
│   ├── RentalListItem.js                https://pastebin.com/QSBncsHw
│   └── RentalsList.js                   https://pastebin.com/QufkCm85
├── Table
│   ├── Table.js                         https://pastebin.com/sq1jBPg1
└── Utils
    └── axios.util.js                    Not usefull here, axios setting
  

Окружающая среда

• NodeJS: 15.2.0
• ReactJS: 16.13.1
• Пряжа: 1.22.5

Что я делаю

В моем основном файле RentalsList.js , Я :

1. Получите некоторые данные о componentDidMount() из /rentals в моем API
2. Обновите состояние с помощью ответа API
3. Отобразить компонент (.. /Table/Table.js ) использование RentalListItem (./RentalListItem.js ) в качестве элемента для этой таблицы. Для достижения этой цели я передаю RentalListItem как prop в named TableItem.

Компонент таблицы вызывается так :

 <Table
  columns={columns}            // Columns of my table
  datas={this.state.rentals}   // Data I got from my API
  TableItem={RentalListItem}   // TableItem which is imported from ./RentalListItem.js
/>
  

Вот пример данных, возвращаемых API :

 [
   {
      "name":"Some name",
      "ref":"AB01234",
      "availability_date": 1605237860,
      "cost": 123.45,
      "type": 0,
      "status": "Available",
      "_id":"5f667cb47919fda09795ccad",
      "address":{
         "number": 1,
         "way_type": "street",
         "way_name": "name",
         "postal_code": 12345,
         "city": "StackyCity",
         "_id":"5fadfc0e2add5eb934c497bb"
      },
      "added_by":{
         "firstname":"Me",
         "lastname":"Andmyself",
         "_id":"5fac8ca0b86ee219381252eb",
         "agency":{
            "ref": "CD56789",
            "name": "agency name",
            "email": "an@email.com",
            "_id":"5fac8f3db86ee219381252ec"
         }
      }
   }
]
  

Мой вопрос

У меня нет никаких ошибок при запуске в режиме разработки. Действительно, у меня есть эта ошибка только после сборки моего кода (для производственной среды)

Почему я получаю эту ошибку в рабочем режиме?

Исследовательские треки

• Я заметил, что после yarn build того, как мой компонент RentalListItem отображается как функция t (e), но когда я пытаюсь вызвать его как функцию, он сообщает мне, что это класс. Хорошо 🙂

• При прямом вызове RentalListItem в качестве компонента в RentalsList у меня нет ошибки

• В Table.js , это.реквизит.TableItem кажется четко определенным при его вызове

Я подозреваю, что это связано с этим JSX:

 <this.props.TableItem index={index} ... />
  

Попробуйте написать это так:

 const TableItem = this.props.TableItem

...

<TableItem index={index} ... />
  

Я считаю, что ваш код является допустимым JSX, но не принято использовать такую точечную нотацию, и моя теория заключается в том, что какая-то часть процесса сборки преобразует его неправильно. Чтобы точно понять, что является причиной этого, нам нужно знать, как выглядит ваша настройка сборки.