React: Hooks are not working with webpack dll plugin

[yevhey]

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

What is the current behavior?
It compiles, but doesn't work.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
I created a repo with simple example and description of the problem:
https://github.com/yevhey/hooks-problem

What is the expected behavior?
It compiles the code and works as usual with webpack.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React/React dom – 16.8.6
browser – chrome 73
os – MacOS Mojave 10.14.4

in React 16.8.0 doesn't work as well.

[leeseean]

why you not show your code in this issue?

[yevhey]

@leeseean no problem:

const Input = () => {
  useEffect(() => {
    console.log('Doesn\'t get here');
  }, []);

  return <input />;
};

Such basic hook doesn't work when exposed via webpack dll plugin.
Error is:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

1. Versions are the same
2. Rules of hooks are not breaking.
3. App is compiled with one React from the outer folder.

[leeseean]

Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you’re curious, we’ll explain this in depth below.)

Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).
https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

[yevhey]

@leeseean I am doing the same.

[o-alexandrov]

cc @mui-org

Please be informed that the issue definitely exists.
I stumbled upon it when trying out the latest 4.0.1 beta version of Material UI.

You can use the example project of Material UI to reproduce the issue.

If you add following packages as part of your DLL for development, then these two packages would stop working as React Hooks are broken when prebundled:

• "@material-ui/styles"
• "@material-ui/core"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[o-alexandrov]

Not stale. The issue could save tremendous bundling time as mostly 80% of a typical list of dependencies on the frontend of a react developer are related to this issue.

Since hooks break on prebundling, the developers have to avoid prebundling on react related dependencies.

Please be clear, if you plan to support it.