Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VirtualizedList get multiple warnings in web #898

Closed
hervejegou opened this issue Apr 16, 2018 · 5 comments
Closed

VirtualizedList get multiple warnings in web #898

hervejegou opened this issue Apr 16, 2018 · 5 comments

Comments

@hervejegou
Copy link

hervejegou commented Apr 16, 2018

Do you want to request a feature or report a bug?

bug

What is the current behavior?
I am testing the new VirtualizedList in new release 0.6.0 and it works well in web and iOS. also inverted prop works which is great for messaging app ! Thanks for the update.

In web client, we do get a number of warnings due to unrecognized props and eventHandlers. nothing breaks so this is low priority:

Warning: React does not recognize the `extraData` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `extradata` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by View)
    in View (created by ScrollViewBase)
    in ScrollViewBase (created by ScrollView)
    in ScrollView (created by VirtualizedList)
....

Same warnings for a number of other props for same element:

Warning: React does not recognize the `keyExtractor` prop on a DOM element.
Warning: React does not recognize the `renderItem` prop on a DOM element.
Warning: React does not recognize the `getItemCount` prop on a DOM element.
Warning: React does not recognize the `getItem` prop on a DOM element. 
Warning: React does not recognize the `disableVirtualization` prop on a DOM element. 
Warning: React does not recognize the `initialNumToRender` prop on a DOM element.
Warning: React does not recognize the `maxToRenderPerBatch` prop on a DOM element.
Warning: Unknown event handler property `onEndReachedThreshold`. It will be ignored.
Warning: React does not recognize the `updateCellsBatchingPeriod` prop on a DOM element.
Warning: React does not recognize the `windowSize` prop on a DOM element.
Warning: React does not recognize the `invertStickyHeaders` prop on a DOM element.

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

What is the expected behavior?

No warnings ?

Environment (include versions). Did this work in previous versions?

  • OS: OS X
  • Device: Macbook Pro
  • Browser: Chrome
  • React Native for Web (version): 0.6.0
  • React (version): 16.3.0-alpha.1
@hervejegou
Copy link
Author

hervejegou commented Apr 17, 2018

I also get some warnings
InteractionManager is not supported on web
when using the new VirtualizedList :

InteractionManager is not supported on web
runAfterInteractions @ index.js?f958:21
(anonymous) @ index.js?4614:75
setTimeout (async)
schedule @ index.js?4614:74
_scheduleCellsToRenderUpdate @ index.js?03ed:791
_onCellLayout @ index.js?03ed:641
onLayout @ index.js?03ed:420
(anonymous) @ index.js?242d:138
_measureLayout @ index.js?18e2:47
measure @ index.js?18e2:63
measure @ index.js?a21a:56
Component._handleLayout @ index.js?242d:132

This seems to come from
// ./node_modules/react-native-web/dist/exports/InteractionManager/index.js

Not sure if I am doing something wrong ? I used minimal options for VirtualizedList and the render component has some TouchableOpacity components with onPress event handlers, but I am not sure if that is what triggers these warnings?

@geraintwhite
Copy link

It also seems that VirtualizedList causes my react-native-web project to fail to compile with babel-loader in webpack, resulting in the following error:

./node_modules/react-native-web/dist/vendor/VirtualizedList/index.js
Module build failed: TypeError: ./node_modules/react-native-web/dist/vendor/VirtualizedList/index.js: Property id of VariableDeclarator expected node to be of a type ["LVal"] but instead got "BinaryExpression"

necolas added a commit that referenced this issue May 30, 2018
Avoiding unknown property warnings from React DOM. Many components
within and build upon React Native do not filter their own properties
and spread them into View. It is expected that React Native ignore these
properties.

Fix #898
necolas added a commit that referenced this issue Jun 3, 2018
Avoiding unknown property warnings from React DOM. Many components
within and build upon React Native do not filter their own properties
and spread them into View. It is expected that React Native ignore these
properties.

Fix #898
necolas added a commit that referenced this issue Jun 3, 2018
Avoiding unknown property warnings from React DOM. Many components
within and build upon React Native do not filter their own properties
and spread them into View. It is expected that React Native ignore these
properties.

Fix #898
@NikitaPanteleev
Copy link

NikitaPanteleev commented Jun 4, 2018

I also faced issue in Chrome browser. But I updated
"react-scripts": "1.1.0" -> "react-scripts": "1.1.4"`

./node_modules/react-native-web/dist/vendor/VirtualizedList/index.js
249:44-55 "export 'default' (imported as 'Batchinator') was not found in '../Batchinator'

@necolas necolas closed this as completed in ad88348 Jun 4, 2018
necolas added a commit that referenced this issue Jun 4, 2018
Avoiding unknown property warnings from React DOM. Many components
within and build upon React Native do not filter their own properties
and spread them into View. It is expected that React Native ignore these
properties.

Fix #898
@geraintwhite
Copy link

I'm still getting the issue where I can't compile a project using anything above [email protected] with babel-loader in webpack.

./node_modules/react-native-web/dist/vendor/VirtualizedList/index.js
Module build failed: TypeError: ./node_modules/react-native-web/dist/vendor/VirtualizedList/index.js: Property id of VariableDeclarator expected node to be of a type ["LVal"] but instead got "BinaryExpression"

@necolas
Copy link
Owner

necolas commented Jun 5, 2018

You'll have to put together an example project to show me the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants