Hello there, Is it possible to export a react library as a js file that is not bundled with react? ...

# react

[andylamax]

Hello there,

Is it possible to export a react library as a js file that is not bundled with react? Coz we have the following problem

Problem
Hooks exported in our library don't work coz we have two instances or react (even if they are of the same version), So they fail with invalid hook call

Desire
Is it possible to declare react as a peerDependency and avoid it being bundled in the final build? That way the it will be bundled with the consumer's version of react?

If this is not possible now, is it possible in the future (near or far)?

[turansky]

Sure, you can use externals to solve this problem

[turansky]

Looks like combination of peer dependencies and externals

[turansky]

Related theme - FYI

[andylamax]

Looking into externals now

[andylamax]

Your link to webpack externals gave me the guide to setup correct externals, that together with npm-publish plugin by @Big Chungus, I was able to set react as a peerDependency, haven't tested this just yet, but planning to do so soon

[Big Chungus]

This is done by default if you use binaries.library() in IR. All npm deps are excluded from js bundle via webpack externals

[andylamax]

Strange, then why was I getting that I have two version of react on the consumer side?

also, if that's the case, shouldn't the generated package.json also include them as peerDependencies?

[Big Chungus]

Not necessarily. Just declaring a dependency in normal dependencies block does not include it in lib js code

[Big Chungus]

It just tells npm to download it

[Big Chungus]

Make sure you declare npm version range rather than specific version, otherwise you'll get minor version conflicts that download react twice

[Big Chungus]

E.g. 17.0.0 vs ^17.0.1 will result in two downloads

[Big Chungus]

While ^17.0.0 and ^17.0.1 both would resolve to the same version

[Big Chungus]

You can use my plugin to override specific version to version range in package.json

[andylamax]

I see, looks like something else was causing my invalid hook call then, I am gonna have to check again.

But again, I still have to declare those dependencies in package.json somehow, so that the consumer's npm should know what to download then

[andylamax]

I ddnt't know about 17.0.0 vs ^17.0.1, that might just be the culprit after all

[Big Chungus]

Yep, usual mistake people make when dipping their fingers in js world comming from jvm 😀

[Big Chungus]

Looks like kotlin ream made it as well with their wrappers

[andylamax]

and here, I was busy using the wrappers for reference 😄

[Big Chungus]

Just add api(npm("react", "^version")) to your gradle script dependencies and you shouldn't need to override anything

[andylamax]

even the package.json?

[andylamax]

its just that, I don't see those dependencies appearing in package.json, its why I thought they are being bundled all together

[Big Chungus]

It's probably a bug in npm-publish plugin as it's not collecting transitive npm deps

[Big Chungus]

That's why you need to add react npm dep explicitly to your project

[andylamax]

I think this might be a bug even in the kotlin gradle plugin then, coz even that generated packages.json (after bundling), doesn't have transitive dependencies either

[Big Chungus]

Hmm in that case it might be that transitive n deps still get bundled with ir backend (a bug)

[andylamax]

let me get to the bottom of this, will report back after wards!!

[Big Chungus]

Thanks!