Hooks error on React library compiled with Rollup.js

Disclaimer: I’m not sure if this is an specific bug from React’s Hooks or it is something I’m missing in my Rollup.js configuration but I’ve been trying a lot of different things and always end up in the same error.

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

I’m building a React Component library using the alpha version of React and Hooks, and using Rollup.js v1.1.2 as a bundler with the next configuration:

import { readdirSync } from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

const CODES = [
  'THIS_IS_UNDEFINED',
  'MISSING_GLOBAL_NAME',
  'CIRCULAR_DEPENDENCY',
];

const getChunks = URI =>
  readdirSync(path.resolve(URI))
    .filter(x => x.includes('.js'))
    .reduce((a, c) => ({ ...a, [c.replace('.js', '')]: `src/${c}` }), {});

const discardWarning = warning => {
  if (CODES.includes(warning.code)) {
    return;
  }

  console.error(warning);
};

const env = process.env.NODE_ENV;

const plugins = [
  external(),
  babel({
    exclude: 'node_modules/**',
  }),
  resolve(),
  replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
  commonjs(),
  env === 'production' && terser(),
];

export default [
  {
    onwarn: discardWarning,
    input: 'src/index.js',
    output: {
      esModule: false,
      file: 'umd/library-name.js',
      format: 'umd',
      name: 'libraryName',
    },
    plugins,
  },
  {
    onwarn: discardWarning,
    input: getChunks('src'),
    output: [
      { dir: 'esm', format: 'esm', sourcemap: true },
      { dir: 'cjs', format: 'cjs', sourcemap: true },
    ],
    plugins,
  },
];

For the examples page I created an internal project using create-react-app and I’m importing the library in the package.json using link:..

The page breaks as soon as it gets to the first Hooks call var svgRef = useRef(); with the error mentioned above, but this only happens when I’m using the bundled code from the ESM file not when I’m using the library code directly. That’s why I’m not sure if it is a Rollup misconfiguration or a React Hooks bug.

I appreciate any help or guidance on this.

React v16.8.0-alpha.1 React DOM v16.8.0-alpha.1 OS: macOS Browser: Chrome Node.js v11.8.0

I did test it with a previous alpha version of React and it happens the same.

[gaearon]

You probably have two Reacts.

[gaearon]

I can’t guess what’s wrong in your particular setup but I’ve described the issue: you’ll see it when you have two Reacts in the resulting bundle. Check the bundle contents. I can’t help you with setting up Rollup, what its errors mean, or how Node resolutions works — just the React part which is definitely related to that.

Npm link is known for causing this because webpack would “see” React both in your lib folder and in your app folder, and would include both of them in the bundle. A common workaround is to npm link back from your lib’s node_modules/react into your app’s React copy.