question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug with react-lifecycles-compat

See original GitHub issue

Bug I’ve created a simple app based off one of the examples on the website:

import React from 'react';
import { AutoSizer, List } from 'react-virtualized';

const list = [
  'Brian Vaughn',
  'Willson Mock',
  'Tiffany Wang'
];

function rowRenderer ({ key, index, style}) {
    return (
        <div key={key} style={style}>
            {list[index]}
        </div>
    )
}

export default class SubAppWithVirtualized extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        <AutoSizer>
            {({ height, width }) => (
            <List
                height={height}
                rowCount={list.length}
                rowHeight={20}
                rowRenderer={rowRenderer}
                width={width}
            />
            )}
        </AutoSizer>
    }
}

When my app compiles, I’m getting this output in my terminal:

WARNING in ./node_modules/react-virtualized/dist/es/Grid/Grid.js
1529:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

WARNING in ./node_modules/react-virtualized/dist/es/ArrowKeyStepper/ArrowKeyStepper.js
184:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

WARNING in ./node_modules/react-virtualized/dist/es/Masonry/Masonry.js
455:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

WARNING in ./node_modules/react-virtualized/dist/es/Collection/CollectionView.js
616:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

WARNING in ./node_modules/react-virtualized/dist/es/MultiGrid/MultiGrid.js
851:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

Here’s the relevant part of my package.json as well:

"devDependencies": {
    "autoprefixer": "8.5.0",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.4",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-register": "6.26.0",
    "clean-webpack-plugin": "0.1.19",
    "css-loader": "0.28.11",
    "file-loader": "1.1.11",
    "postcss": "6.0.22",
    "postcss-loader": "2.1.5",
    "resolve-url-loader": "2.3.0",
    "sass-loader": "7.0.1",
    "style-loader": "0.21.0",
    "uglifyjs-webpack-plugin": "1.2.5",
    "url-loader": "1.0.1",
    "webpack": "3.6.0"
  },
  "dependencies": {
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "react-virtualized": "^9.19.0"
  }

I’ve tried modifying my imports like this and still get similar results:

import Autosizer  from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'
WARNING in ./node_modules/react-virtualized/dist/es/Grid/Grid.js
1529:0-8 "export 'default' (imported as 'polyfill') was not found in 'react-lifecycles-compat'

This time the warning in the terminal is shorter. In both cases though, I get the following error in my browser:

screen shot 2018-05-17 at 12 08 04 pm

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
wuweiweiwucommented, May 23, 2018

react-virtualized@9.19.1 has been released! https://www.npmjs.com/package/react-virtualized

3reactions
wuweiweiwucommented, May 22, 2018

@fay-jai I’ll try to release in the next two days!

Read more comments on GitHub >

github_iconTop Results From Across the Web

'react-lifecycles-compat' does not contain a default export ...
It is not a good solution but it is a last resort I felt if nothing else worked. Is it a bug in...
Read more >
react-lifecycles-compat | Yarn - Package Manager
react-lifecycles-compat ... Fixed an edge case bug where a batched update containing both a setState updater and a parent re-render could result in...
Read more >
дэн on Twitter: "@_reznord @reactjs Please wait for official ...
Yes, we just learned a couple of hours ago. It's a bug.
Read more >
React (forked) - StackBlitz
16.13.1. react-dom. 16.13.1. react-lifecycles-compat. 3.0.4. Something broken? File a bug! index.js. Format Document. Split Editor. More Actions… Close all.
Read more >
Update on Async Rendering – React Blog
This often leads to bugs. ... If you're writing a shared component, the react-lifecycles-compat polyfill enables the new ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found