profile
viewpoint

Ask questionsHooks API - hook breaks when exported from module

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

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"
  ]
}
facebook/react

Answer questions bgarrett-rt

Is there a work around for local dev of packages? I'm getting this same issue with hooks in a dependency I'm also working on.

useful!

Related questions

Disable react strict mode on third party libraries hot 7
Warning: Unknown DOM property for. Did you mean htmlFor? hot 6
TypeError: Object(...) is not a function
Refs - &#34;object is not extensible&#34;
React@16.9 block `javascript:void(0);`
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
"DevTools v4 is incompatible with this version of React" with React Native & latest version of React hot 3
Feedback on useEffect depndencies change error hot 3
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
Error on unit test : Cannot read property 'Symbol(Symbol.iterator)' of undefined hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
source:https://uonfu.com/
Github User Rank List