question: Unknown props when splitting entry points in webpack

rosskevin commented 7 years ago

I doubt this is a bug with react-formal 0.24.1, but figured I would look for guidance here since I am only seeing a problem using react-formal in my setup. This only happens when I split my entry points in webpack. It seems as if the react-formal Form isn't used at all, but that doesn't seem the case from the stack trace:

warning.js:36 Warning: Unknown props `schema`, `onValidate`, `errors`, `getter`, `setter`, `component`, `strict`, `delay` on <form> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in form (created by Form)
    in MessageContainer (created by MessageListener)
    in MessageListener (created by Form)
    in BindingContext (created by Form)
    in Form (created by Uncontrolled(Form))
    in Uncontrolled(Form) (created by Form)
    in Form (created by Translate(Form))
    in Translate(Form) (created by pure(Translate(Form)))
    in pure(Translate(Form)) (created by Required)
    in Required (created by pure(Required))
    in pure(Required) (created by RouterContext)
    in div (created by AppContent)
    in AppContent (created by pure(AppContent))
    in pure(AppContent) (created by AppFrame)
    in div (created by AppFrame)
    in AppFrame (created by withWidth(AppFrame))
    in EventListener (created by withWidth(AppFrame))
    in withWidth(AppFrame) (created by Translate(withWidth(AppFrame)))
    in Translate(withWidth(AppFrame)) (created by Relay(Translate(withWidth(AppFrame))))
    in Relay(Translate(withWidth(AppFrame))) (created by RouterContext)
    in StaticContainer (created by RouteContainer)
    in RouteContainer (created by RouterContext)
    in RouterContext (created by Router)
    in StaticContainer (created by RelayReadyStateRenderer)
    in RelayReadyStateRenderer (created by RelayRenderer)
    in RelayRenderer (created by RelayRouterContext)
    in RelayRouterContext (created by Router)
    in Router (created by Base)
    in MuiThemeProvider (created by Base)
    in MuiThemeProvider (created by Base)
    in I18nextProvider (created by Base)
    in Base (created by pure(Base))
    in pure(Base) (created by pure(Component))
    in ConfigProvider (created by pure(ConfigProvider))
    in pure(ConfigProvider) (created by pure(Component))
    in pure(Component)
    in AppContainer

This is a gist of my webpack config.

This problem only started occurring when I started splitting entry points to manifest, vendor, application with both react-formal and yup being part of vendor.

I tried removing everything except one package (classnames) from vendor, and even though almost everything is back in the monolithic application entry point, I still see these errors using react-formal.

We reverted to pre-multiple entry point (same react-formal version) and again all was well.

If anyone has any thoughts or suggestions, please let me know - I'll try anything.

Here is a gist of yarn ls with all versions.

rosskevin commented 7 years ago

New information, I systematically reverted the split entry points (back to a single entry point) - same error. So I've done other optimizations or changes to the webpack config that must have caused this.

Closing until I have figured out any more that could be used to get some help from the community.

rosskevin commented 7 years ago

Just to close this loop, I found the problem.

I attempted to add the lodash-webpack-plugin with:

import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
...
new LodashModuleReplacementPlugin()

It seems that this plugin is either too overzealous with optimization, or I need to turn some off. Either way, the savings for me were minimal so I'm going to do without it to avoid any further conflicts.

TLDR;

This problem had nothing to do with entry point splitting. Don't use lodash-webpack-plugin without knowing what you are doing.

jquense / react-formal

question: Unknown props when splitting entry points in webpack #109

TLDR;