React-table: Cell does not render content in production builds

[nikhilem]

Describe the bug (required)

In react-table v7.0.0, cells of the table are rendered empty only in production builds of the app, but works in the development server

Provide an example via Codesandbox! (required)
Example: Virtualized-Rows sandbox works fine when run in development mode. But, when run by building the project(yarn build), the cells are empty.

Steps To Reproduce (required)
Steps to reproduce the behavior:

Build the project and the run the built version, the cells of the table are empty

Expected behavior (Recommended)
The built version should works exactly as the development version, the cells of the table should be rendered correctly.

Screenshots

When run locally(development version)

When run after building(production version)

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 80

Smartphone (please complete the following information):
N/A

Additional context
React Table version: v7.0.0

Works fine on v7.0.0-rc.10

[teagueash]

I have similar issues on my development server, except headers aren't rendering as well (see attached screenshot). v7.0.0-rc.10 does not resolve the issue either.

[tprata]

Hello,
I had just the same problem, you need to check your yarn.lock
My resolved version was 7.0.0.rc-16 (even if it was not the one i put in my package.json, which i find strange)
After i did a "yarn add" to add a new library in my project, the yarn.lock was unexpectedly updated, the resolved package transformed to the latest stable release, 7.0.0 (not very stable tho)
I rolled back my yarn.lock to 7.0.0.rc-16, that fixed my issue

[samjbmason]

Im having this exact same issue with v7.0.0. I will roll back and see if I get anywhere with the v7.0.0rc-16

[Toyobaru]

Same issue with v7.0.0 on MacOS, Chrome. Works fine when I use v7.0.0.rc-16

[jketcham]

I came across this same bug, downgrading to v7.0.0-rc.16 fixed the issue for me. Using this with gatsby 2.13.25.

[ac1997]

Same issue here with v7.0.0, works fine with v7.0.0-rc.15
Development server is fine. Production build is not rendering any content, not even header.

[suriyaprashath]

Problem:
I faced the same issue too in v7.0.0. To give more info on the issue I faced:

• render method works if the derived value(column[type]) is a primitive
• render method doesn't work if the derived value(column[type]) is a function

Observation:
As per my quick look, there is some problem due to the minification of the code in the production version. Below is the minified code of the flexRenderer method of the actual source code, in the production version, which is potentially causing the problem:

When I keep breakpoint in the above method and execute using F11, the debugger is not going executing line 185 which handles the case when column[type] is a function.

Patch:
As a quick solution, I implemented a patch file by extracting the code necessary from the actual source which I have attached below (change the extension to .js before using).
render.service.txt

How to use the patch:
Use the patchRenderer method exported instead of cell.render or column.render
Column render:
Before:
column.render('Header')
Now:
patchRenderer('column', tableInstance, column, null, 'Header', null)

Cell render:
Before:
cell.render('Cell')
Now:
patchRenderer('cell', tableInstance, column, {row, cell}, 'Cell', null)

Hope this helps :)

[alocke12992]

Thanks @suriyaprashath - Though it looks like its not supporting the filter render. I can report downgrading to v7.0.0.0-rc.16 worked for me. Using react v16.9, styled-components v4.2.0, webpack v4.20.2

[suriyaprashath]

Hi @alocke12992, looks great.
Until this is fixed if someone needs to use the latest version along with cell and column render, kindly use the patch in the above comment.

[tannerlinsley]

This bug is VERY VERY strange. Still working on this, but rest assured, the tiny little insect causing this will be hunted and killed as soon as humanly possible.

[tannerlinsley]

I still don't know why this was happening, but I managed to fix it by simply pre-inlining the function that terser was inlining in the end. 🤷‍♂

[tannerlinsley]

Released to 7.0.2

[nikhilem]

Thanks @tannerlinsley

[brandonparis]

I'm seeing this happen on release 7.2.0, but only with the Headers. Downgrading to 7.0.2 resolved it.

[RileyMShea]

@tannerlinsley I am also still seeing this issue with 7.2.1

[kyiii]

@tannerlinsley Very strange, am still experiencing this with 7.3.0 but only with Netlify/Vercel builds.

[thiagozf]

I am also still seeing this issue with 7.5.0

[stefanmaretic]

I am also still seeing this issue with 7.5.0

Same here, also experiencing this. This is kind of a big deal I think this should get reopened.

[Karl992]

Still seeing this issue with 7.5.1 in my developer server.

[pmilla1606]

Also seeing this with 7.5.1

[UcheSylvester]

Experiencing this same issue but this time the entire table is not rendered in production, even after downgrading from v7.5.2 to v7.0.0.0-rc.16

[pmilla1606]

Removing react.strictmode fixed it for me. If you’re using CRA your app will be wrapped in it.

[UcheSylvester]

Removing react.strictmode fixed it for me. If you’re using CRA your app will be wrapped in it.

@pmilla1606, the app is not wrapped in react.strictmode.

[pmilla1606]

Are you on the latest version? I haven’t had any issues since removing strict and updating.

[UcheSylvester]

currently, no. I had to downgrade to v7.0.0.0-rc.16 which didn't solve the problem either. But I'd removed the strictmode even before installing react table

[Kuzzmich]

I'm experiencing similar issue, but I can't see only table head. I tried to downgrade the version a few times, but without success. My current version is 7.6.0

[gustavo-pateti]

Similar issue here, building a CRA app, it doesn't render anything. Downgraded to 7.0.2, working now.