CODEWITHSUNDEEP
javascriptreactjs
Aaron_Actu
Aaron_Actu

Reputation: 112

React.js app works fine in development mode but has errors after building (production mode)

The error

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

error

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

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": "[email protected]",
            "_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

Upvotes: 1

Views: 1766

Answers (1)

Sidney
Sidney

Reputation: 4775

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.

Upvotes: 1

Related Questions