react: 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.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 10
- Comments: 29
You probably have two Reacts.
@ghostjzf if your problem is because of linking the package locally (and not installing from npm repository), then https://github.com/facebook/react/issues/13991#issuecomment-435587809 solves the problem.
If not that, then the problem is that you should add
reactas an external dependency in your rollup config, e.g: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.
Hello @eduardosanzbBCG I did solve it. Check out the configuration file I have for Rollup. Is working great!
@davegomez do you have any update on the issue? Did you solved it?
(Currently having the same issue, plus I’m also using typescript) Thanks!
Update I solved it following this comment
Not sure if that will help anyone, but what worked for me was:
reactandreact-domfrom the dependencies and move them topeerDependenciesHope that helps 🤞
thank you for your help, but when I use the “npm link” to test it, it’s also facing the same problem
@gaearon … I think this issue is not just happening because of two versions of react, When we use hooks in a component library and bundle it as ES6 distribution, hooks are pushed inside conditions (like if) and we are getting this error. I am including library as file:…/ Can you please tell how to overcome this.
This was rough, and I learned a lot, but in the end what worked for me was manually editing (in MyLib that’s sym-linked into MyProject) the build output
dist/index.esm.jsfile, and changing the import of React:It’s annoying, and I changed the build script in my lib to do this for me, but it was so sweet when it WORKED:
Hope this helps any other stuck folks, I’m on linux so your
sedcommand might be different.I don’t think this is the case @gaearon so I would like to provide a little bit more context to see if might be something else.
I have React, React DOM, and Styled Components as peer dependencies of my library:
Besides having React as a
peerDependencyI have to install it as adevDependencyotherwise I’m getting this error (but I think this is a different issue):The internal examples page has the following
package.jsonfile:And if I check the
node_modulesdirectory only one version of React is installed.Please let me know if I can provide mode information on this? I would code a pen or something trying to replicate what is happening but I’m not sure if I can do a pen to replicate the Rollup part.
I’m gonna try to publish the code soon in case it might be of some help.
Update
I just try to use the library using
npm linkfrom an externalcreate-react-appproject using the same configuration and I got the same result. I still need to add React as adevDependencyand now I’m getting a different error if I use the production build (a Webpack related error) I guess fromcreate-react-app.Wow I was losing my mind all day and this was the only thing that worked for me, thank you!