Hooks API - hook breaks when exported from module

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

What is the current behavior? I wrote a hook similar to the example in the following article: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

When placed in a module and imported into another package, the following is thrown:

Hooks can only be called inside the body of a function component.

I can confirm the same code (exactly the same) works when placed into the calling app and imported (i.e., import withHook from src/hooks works with the same definition for the hook, if the hook is in src/hooks/index.js instead of a node_module)

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:

The transpiled module:

// index.js

import _slicedToArray from "/Users/pdeona/Desktop/react-hook-test/hooks-test/node_modules/@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useState } from 'react';
export default (function () {
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  useEffect(function () {
    console.log('hooked');
  });
  return [state, setState];
});

The app calling the hook: (created with CRNA 2, installed React, ReactDOM @next)

import React from 'react';
import withHook from 'withHook'
import logo from './logo.svg';
import './App.css';

function App () {
  const [s, setS] = withHook()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

What is the expected behavior?

The hook runs.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

tested on Chrome 71, server on Node 10.13.0

module package.json:

{
  "name": "withHook",
  "version": "0.0.1",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "babel index.js --out-dir dist --preset env"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "react": "^16.7.0-alpha.2"
  }
}

app package.json:

{
  "name": "hooks-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-scripts": "2.1.1",
    "withHook": "0.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[gaearon]

If you follow the link in the error message, it leads to a page that explains possible causes, mentioning the workaround for npm link workflows as well.

[kMeillet]

Are you using a mono-repository or npm/yarn symlink ? I’m pretty sure you have 2 instances of React in your final bundle.

• hooks-test/node_modules/withHook/node_modules/react
• hooks-test/node_modules/react

Inspect bundle documentation : https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size