website: add missing dependencies #3653

MaximFedarau · 2022-10-13T19:33:29Z

Before: after dependencies installation and starting the website it broke with 30! errors.
Now: everything works.

Motivation

Fixes bug with the launch of the website (website didn't launch at all!).

Type of change

Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Jest Unit Test
Checked with example app

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
My changes generate no new warnings
New and existing unit tests pass locally with my changes

Before: after dependencies installation and starting the website it broke with 30! errors. Now: everything works.

MaximFedarau · 2022-10-14T09:38:44Z

@arpitBhalla

arpitBhalla · 2022-10-14T10:33:58Z

Can you share the issue you were facing?

MaximFedarau · 2022-10-14T10:46:27Z

Actions

cd website;
run yarn;
run yarn start;

Errors

Have 30 compile errors:

Can't resolve buffer in PATH_ON_MY_COMPUTER;
Can't resolve process/browser.

My patch fixes BOTH errors in all places.

MaximFedarau · 2022-10-14T16:49:35Z

Hey, @arpitBhalla, there is some demo for both cases:

Before fix:

Work with console:

demo_fail.mp4

Website itself:

After fix:

Work with console:

demo_success.mov

Website itself:

arpitBhalla · 2022-10-14T19:42:30Z

Hey, it's bit weird you are getting this error, assert, process and buffer are already there in node, try upgrading/reinstalling node maybe?

MaximFedarau · 2022-10-14T19:44:09Z

Tried it.
It's not working.

MaximFedarau · 2022-10-14T19:46:26Z

Also I has the latest node: v18.10.0.

MaximFedarau · 2022-10-14T20:12:47Z

@arpitBhalla, just ran website in Docker container.
It has the same error.

codecov · 2022-10-14T20:20:26Z

Codecov Report

Merging #3653 (f469149) into next (4ebfd47) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #3653   +/-   ##
=======================================
  Coverage   79.23%   79.23%           
=======================================
  Files          87       87           
  Lines        1811     1811           
  Branches      802      802           
=======================================
  Hits         1435     1435           
  Misses        370      370           
  Partials        6        6

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

MaximFedarau · 2022-10-14T20:35:00Z

🐳Docker test🐳

Before fix:

docker logs 8f28eca7110e26c8bde5841de194c6b38708ef8d50938d902f15e43960fcbc65

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at http://localhost:3000/.
ℹ Compiling Client
✔ Client: Compiled with some errors in 50.00s


Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/code-frame/lib'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/core/lib/config/helpers'
Module not found: Error: Can't resolve 'buffer' in '/app/website/node_modules/@babel/generator/node_modules/jsesc'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/helper-compilation-targets/lib'
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@babel/helper-module-imports/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@babel/helper-module-imports/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@babel/helper-module-transforms/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@babel/helper-module-transforms/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/highlight/node_modules/chalk'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/types/lib/definitions'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/types/lib/definitions'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@babel/types/lib/definitions'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@docusaurus/core/node_modules/semver/internal'
Module not found: Error: Can't resolve 'buffer' in '/app/website/node_modules/@jridgewell/sourcemap-codec/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@miksu/prettier/lib/common'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@miksu/prettier/lib/language-js'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@miksu/prettier/lib/language-js'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@miksu/prettier/lib/main'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@miksu/prettier/lib/main'
Module not found: Error: Can't resolve 'assert' in '/app/website/node_modules/@miksu/prettier/lib/main'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@miksu/prettier/lib/main'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@miksu/prettier/node_modules/@babel/code-frame/lib'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/@miksu/prettier/node_modules/chalk'
Module not found: Error: Can't resolve 'buffer' in '/app/website/node_modules/@philpl/buble/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/browserslist'
Module not found: Error: Can't resolve 'buffer' in '/app/website/node_modules/convert-source-map/node_modules/safe-buffer'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/debug/src'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/path-browserify'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/vnopts/node_modules/chalk'
Module not found: Error: Can't resolve 'process/browser' in '/app/website/node_modules/webpack-dev-server/client/modules/logger'
client (webpack 5.72.1) compiled with 30 errors

Now:

docker logs 3f960e3b8552fff6f8baaa4bfdc506a08d573a712c68f03bb2659dc718cf7515

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at http://localhost:3000/.
ℹ Compiling Client
✔ Client: Compiled successfully in 55.58s
client (webpack 5.72.1) compiled successfully

MaximFedarau · 2022-10-15T10:22:14Z

Hey, @arpitBhalla.
In general fix:

solves the issue on local computer
solves the issue in Docker container
passes all checks.

Will you merge this pr?😅

arpitBhalla · 2022-10-15T10:50:48Z

Hey, i have to manually update yarn.lock file

MaximFedarau · 2022-10-15T18:09:40Z

@arpitBhalla, I just saw, that yarn.lock updates (rewrites) automatically after running yarn command.

arpitBhalla · 2022-10-22T07:23:58Z

@arpitBhalla, I just saw, that yarn.lock updates (rewrites) automatically after running yarn command.

Yep I am aware of that, was making sure no miscellaneous pkg was added via lock file.

fix: fix bug with website launching

f469149

Before: after dependencies installation and starting the website it broke with 30! errors. Now: everything works.

MaximFedarau changed the title ~~fix: fix bug with website launching~~ fix: fix error with website launching, that breaks it Oct 13, 2022

arpitBhalla changed the title ~~fix: fix error with website launching, that breaks it~~ website: add missing dependencies Oct 14, 2022

arpitBhalla approved these changes Oct 15, 2022

View reviewed changes

arpitBhalla merged commit dd76982 into react-native-elements:next Oct 22, 2022

arpitBhalla added the PR: Docs 📝 label Oct 22, 2022

Uh oh!

website: add missing dependencies #3653

website: add missing dependencies #3653

Uh oh!

Conversation

MaximFedarau commented Oct 13, 2022

Motivation

Type of change

How Has This Been Tested?

Checklist

Uh oh!

MaximFedarau commented Oct 14, 2022

Uh oh!

arpitBhalla commented Oct 14, 2022

Uh oh!

MaximFedarau commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Actions

Errors

My patch fixes BOTH errors in all places.

Uh oh!

MaximFedarau commented Oct 14, 2022

Before fix:

Work with console:

Website itself:

After fix:

Work with console:

Website itself:

Uh oh!

arpitBhalla commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MaximFedarau commented Oct 14, 2022

Uh oh!

MaximFedarau commented Oct 14, 2022

Uh oh!

MaximFedarau commented Oct 14, 2022

Uh oh!

codecov bot commented Oct 14, 2022

Codecov Report

Uh oh!

MaximFedarau commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🐳Docker test🐳

Before fix:

Now:

Uh oh!

MaximFedarau commented Oct 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arpitBhalla commented Oct 15, 2022

Uh oh!

MaximFedarau commented Oct 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arpitBhalla commented Oct 22, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MaximFedarau commented Oct 14, 2022 •

edited

Loading

arpitBhalla commented Oct 14, 2022 •

edited

Loading

MaximFedarau commented Oct 14, 2022 •

edited

Loading

MaximFedarau commented Oct 15, 2022 •

edited

Loading

MaximFedarau commented Oct 15, 2022 •

edited

Loading