How to bundle react.js into the bundle with rollup_bundle?

[solomatov]

Is there any standard way to embed react.js and other libraries into the resulting bundle like webpack does? Currently, I bundle react separately via globals.

What about other libraries?

It would be nice to provide information on this in the documentation.

[stephanwlee]

Hi rules_nodejs, thanks for the awesome rules. If I may interpret what @solomatov and other issues like #532 are saying, I think the rules_nodejs should have some minimal example using React cause it is not straight-forward.

In case it is not clear, let me share why it is not so straight-forward. Technically, React is just like other npm packages and you can use rules_nodejs to npm install and bundle application using rollup. React, however, is a bit different than some npm packages because it is isomorphic and uses process.env.NODE_ENV. The NODE_ENV, of course, is a Node global and is not present in the browser. When building such library, people often use Babel plugin or rollup-plugin-replace to replace the statement as a string literal.

Now, I wish rules_nodejs to include an example that uses React to dogfood how difficult customizing rollup_bundle can be. Few problems I faced:

1. naively, I wished to pass my custom rollup configuration but that is not possible. You must fork the rollup_bundle using internal/rollup which is not ideal
2. cannot use a node_modules in a custom rollup config not present in this package.json https://github.com/bazelbuild/rules_nodejs/blob/15cf52364b7bd3f5ab2849fc3a6c3ae248c931f7/internal/rollup/package.json#L4-L15. I ended up creating my own nodejs_binary for rollup (I understand why this would be desired but keeping track of dependencies of bundler vs. app feel a bit too much -- bifurcating dependencies in devDependencies vs. dependencies, imo, should be enough).
3. related to (2) but https://github.com/bazelbuild/rules_nodejs/blob/e115dea562ca60654b496df677b0b4327c62eba8/internal/rollup/rollup_bundle.bzl#L54-L55 is probably out-dated and is not straight-forward. https://github.com/angular/angular/blob/master/packages/bazel/src/ng_rollup_bundle.bzl

Perhaps I am missing context or information. I would appreciate it if you can point to a working example that makes my point invalid. Thanks a lot!

[tony-scio]

I agree more flexible Rollup config would be awesome. In the meantime, I worked around this by importing an environment.ts file before React is imported. It just contains:

window.process = { env: { NODE_ENV: 'production' } }

[alexeagle]

FYI a configurable rollup_bundle rule is coming soon: #1072

Under production, you'll be able to use rollup-plugin-replace to solve this.
For our default devmode there is no bundler at all, just the concatjs library which does no transformations. Is it good enough if your devmode entry point actually needs (window as any).process = { env: { NODE_ENV: 'development' } } in the app.ts file?

[hgad]

FYI a configurable rollup_bundle rule is coming soon: #1072

Under production, you'll be able to use rollup-plugin-replace to solve this.
For our default devmode there is no bundler at all, just the concatjs library which does no transformations. Is it good enough if your devmode entry point actually needs (window as any).process = { env: { NODE_ENV: 'development' } } in the app.ts file?

Thanks for the update! I see the PR has been merged. Has this been released yet? If not, can we start using it with a git_repository() rule?

[alexeagle]

@hgad we haven't released it yet - and it doesn't support ts_library inputs yet so I don't think it's usable in most apps yet.

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"