React.js 应用程序在开发模式下运行良好，但在构建（生产模式）后出现错误

Question

The error

Well, it's have been hours I'm trying to find out why I got this error (only in when running build):

The architecture

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

Environment

• NodeJS: 15.2.0
• ReactJS: 16.13.1
• Yarn: 1.22.5

What I do

In my main file, RentalsList.js, I:

1. Get some data on componentDidMount() from /rentals on my API
2. Update state with the API's answer
3. Display a component (../Table/Table.js) using RentalListItem (./RentalListItem.js) as item for this table. To achieve that, I pass RentalListItem as prop in named TableItem.

Table component is called like that:

<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
/>

Here is an example of datas returned by 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"
         }
      }
   }
]

My question

I don't have any error while running it under development mode. Indeed, I only have this error after building my code (for production environment)

Why do I get this error in production mode?

Research tracks

• I noticed that after yarn build , my componenent RentalListItem is rendered as a function t(e) but when I try to call it as a function it tells me that's a class. Well:)

• When calling directly RentalListItem as a component on RentalsList I have no error

• In Table.js, this.props.TableItem seems to be well defined when it's called

Answer 1

I suspect it's related to this JSX:

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

Try writing it like this:

const TableItem = this.props.TableItem

...

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

I believe your code is valid JSX, but it's not common to use dot notation like that, and my theory is that some part of the build process transforms it incorrectly. In order to understand exactly what is causing this, we'd need to know what your build setup looks like.