Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

V5 add back support for node builtins #11764

Closed
wants to merge 8 commits into from
Closed

V5 add back support for node builtins #11764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
166d872
Add support for nodejs builtins
Dec 15, 2021
5e83115
Update package-lock
Dec 15, 2021
944a50a
Make default behavior to provide empty fallback modules
Dec 17, 2021
cb4a8a3
Add Proxy fallback module for nodejs builtin in development only for …
Dec 17, 2021
e6b5b3a
Add legacy browser support and refactor + QA
Dec 17, 2021
46b4e0c
Add development fallbacks per module to improve DX
Dec 17, 2021
17fa022
Add documentation of the escape hatch for node builtin modules
Dec 17, 2021
20dada7
Fix typo in comment
Dec 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions docusaurus/docs/nodejs-builtin-fallbacks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
id: nodejs-builtin-fallbacks
title: NodeJS builtin fallbacks
---

NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules in your web application.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
NodeJS builtin fallbacks enable you to import NodeJS builtin modules meant for Node and fallback to browser specific modules in your web application.
Node.Js builtin fallbacks enable you to use browser-compatible versions of Node.Js builtin modules when you or your dependencies) import these Node.Js packages into your web application.


Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.
By default, Create React App set fallbacks to empty modules in the production build and development fallbacks when in development mode.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did some light copy edits. but this sentence isn't very clear, could you clarify what you mean by 'empty modules' and 'development fallbacks'?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Per default Create React App set fallbacks to empty modules in production build and development fallbacks in development mode.
This restores the previous behavior in Webpack < 5, where Create React App used to include these builtin fallbacks.

I think this is how the sentence was intended, connecting to the previous sentence. I changed the inclusion to past tense.


In development mode you might get error messages in your browser console similar to:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In development mode you might get error messages in your browser console similar to:
In development mode, you receive error messages in the terminal where you're running the development server similar to:

i'm seeing the errors in my terminal where i'm running npm start, not browser console


```
(dev) Error: Module "path" not found, cannot access property "join", please read https://create-react-app.dev/docs/nodejs-builtin-fallbacks
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this appears to be a broken link

```

_(It's possible to disable these warnings in development using the environment variable: `DISABLE_MISSING_NODEJS_BUILTIN_MODULE_FALLBACK_WARNING=true`)_
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
_(It's possible to disable these warnings in development using the environment variable: `DISABLE_MISSING_NODEJS_BUILTIN_MODULE_FALLBACK_WARNING=true`)_
_You can disable these warnings in development using the environment variable: `DISABLE_MISSING_NODEJS_BUILTIN_MODULE_FALLBACK_WARNING=true`_


**IMPORTANT:** Before fixing this dependency, please make sure to only use Npm packages meant for the browser and not for Node / backend.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**IMPORTANT:** Before fixing this dependency, please make sure to only use Npm packages meant for the browser and not for Node / backend.
**IMPORTANT:** Before fixing this dependency, try to only use npm packages meant for the browser and not for Node.Js if possible.


It takes abit of work but visit the project documentation, README.md and if on GitHub etc. look open and closed issues in the project e.g. search "browser" to see if maintainers close issues for browser support.
Copy link

@mongodben mongodben Apr 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
It takes abit of work but visit the project documentation, README.md and if on GitHub etc. look open and closed issues in the project e.g. search "browser" to see if maintainers close issues for browser support.

i don't think this is necessary


Implications of loading packages not build for the browser can vary from security, bundle size etc. - There might be better alternatives.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Implications of loading packages not build for the browser can vary from security, bundle size etc. - There might be better alternatives.
There can be unexpected implications of loading packages not build for the browser which include security, bundle size etc. It is generally a better to use packages intended for the browser if possible.


**Escape hatch**
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**Escape hatch**
## Escape hatch


To fix the issue you will need to add the browser fallback - the example above complains about missing `path` module.
Copy link

@mongodben mongodben Apr 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To fix the issue you will need to add the browser fallback - the example above complains about missing `path` module.
If you cannot find a native browser replacement module, you can use one of the following polyfills.
You just have to install the module, and Create React App will use it.
For example, to address the above-mentioned error message for the `path` module, run:


```bash
npm install path-browserif
# or..
yarn add path-browserif
```

Create React App will recognize the fallback and use that instead of an empty module.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Create React App will recognize the fallback and use that instead of an empty module.

removing b/c covered in the previous suggestion

_(Find the fallback package in the table bellow)_
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
_(Find the fallback package in the table bellow)_
Create React App supports the following fallback module polyfills.


| NodeJS builtin module | Browser version |
| :-------------------- | :------------------------- |
| assert | assert |
| buffer | buffer |
| console | console-browserif |
| constants | constants-browserif |
| crypto | crypto-browserif |
| domain | domain-browse |
| events | events |
| http | stream-htt |
| https | https-browserif |
| os | os-browserify/browse |
| path | path-browserif |
| punycode | punycode |
| process | process/browse |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: should be process/browser (missing r at the end).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least half the names in the 2nd column seem to be missing their last letter:

  • browserif should be browserify ? (multiple variants)
  • stream-htt should be stream-http ?
  • readable-stream/duple should be readable-stream/duplex ?
    etc etc etc

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're looking at this at the moment, and just noticed this issue too. Thanks @no23reason and @PjotrB.

| querystring | querystring-es |
| stream | stream-browserif |
| stream_duplex | readable-stream/duple |
| stream_passthrough | readable-stream/passthroug |
| stream_readable | readable-stream/readabl |
| stream_transform | readable-stream/transfor |
| stream_writable | readable-stream/writabl |
| string_decoder | string_decoder |
| sys | util |
| timers | timers-browserif |
| tty | tty-browserif |
| url | url |
| util | util |
| vm | vm-browserif |
| zlib | browserify-zlib |
1 change: 1 addition & 0 deletions docusaurus/website/sidebars.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"can-i-use-decorators",
"pre-rendering-into-static-html-files",
"advanced-configuration",
"nodejs-builtin-fallbacks",
"alternatives-to-ejecting"
],
"Support": ["troubleshooting"]
Expand Down
Loading