table: Cell does not render content in production builds
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
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 11
- Comments: 33
Released to 7.0.2
Problem: I faced the same issue too in v7.0.0. To give more info on the issue I faced:
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 😃
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. 🤷♂
I’ve faced the same issue with version 7.7.0 in a next.js project. Downgrading the next version from 12.0.8 (latest) to 12.0.7 solved the issue.
Same here, also experiencing this. This is kind of a big deal I think this should get reopened.
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