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.

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

Bump react-scripts from 3.4.1 to 4.0.3 + fix associated tech debt #1102

Merged
merged 38 commits into from
May 6, 2021

Conversation

0xdevalias
Copy link
Contributor

@0xdevalias 0xdevalias commented Jan 25, 2021

Bumps react-scripts from 3.4.1 to 4.0.3.

Partially fixes sparkletown/internal-sparkle-issues#617

Partially fixes sparkletown/internal-sparkle-issues#645

Release Notes

Notes

TODO

@0xdevalias 0xdevalias self-assigned this Jan 25, 2021
@github-actions github-actions bot added the dependencies Pull requests that update a dependency file label Jan 25, 2021
@codeclimate
Copy link

codeclimate bot commented Jan 25, 2021

Code Climate has analyzed commit e384d8f and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category Count
Complexity 1

View more on Code Climate.

Copy link

@codeclimate codeclimate bot left a comment

Choose a reason for hiding this comment

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

The PR diff size of 16217 lines exceeds the maximum allowed for the inline comments feature.

@0xdevalias
Copy link
Contributor Author

0xdevalias commented Apr 7, 2021

Note: react-scripts is up to v4.0.3 now, so when we come back back to this, we should make sure to target at least that version (or whatever is then the latest):

⇒  npm install --save --save-exact [email protected]

..snip..

+ [email protected]
added 946 packages from 247 contributors, removed 369 packages, updated 435 packages, moved 27 packages and audited 3404 packages in 77.858s

@0xdevalias 0xdevalias changed the title Bump react-scripts from 3.4.1 to 4.0.1 Bump react-scripts from 3.4.1 to 4.0.3 Apr 28, 2021
@0xdevalias 0xdevalias force-pushed the devalias/deps-upgrade-react-scripts branch from beccf47 to dbeb394 Compare April 28, 2021 04:21
@0xdevalias
Copy link
Contributor Author

Failed to compile.

./src/components/molecules/NavBar/NavBar.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/components/molecules/NavBar/NavBar.scss)
Error: Can't resolve '../../../icons/sparkle-nav-logo.png' in '/Users/devalias/dev/sparkle/sparkle/src/components/molecules/NavBar'

@github-actions github-actions bot added the 💎 styles For (S)CSS style related issues/changes/improvements/etc. label Apr 28, 2021
@0xdevalias
Copy link
Contributor Author

0xdevalias commented Apr 28, 2021

Starting the development server...

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <3.10.0

YOUR TYPESCRIPT VERSION: 4.2.4

Please only submit bug reports when using the officially supported version.

=============

Currently on: https://github.com/typescript-eslint/typescript-eslint/blob/HEAD/CHANGELOG.md#371-2020-07-27

Latest seems to be 4.22.0 at the moment:


Looks like react-scripts provides this dependency for us:

⇒  npm ls @typescript-eslint/eslint-plugin
[email protected] /Users/devalias/dev/sparkle/sparkle
├── @typescript-eslint/[email protected]
└─┬ [email protected]
  └── @typescript-eslint/[email protected]

⇒  npm ls @typescript-eslint/parser
[email protected] /Users/devalias/dev/sparkle/sparkle
├── @typescript-eslint/[email protected]
└─┬ [email protected]
  └── @typescript-eslint/[email protected]

I tried explicitly removing the dependencies from our package files to use the version it supposedly includes by default, but I was getting all sorts of errors/issues.

There used to be a EXTEND_ESLINT env var in create react app, but since v4 they removed it as apparently it's not needed anymore:

There seems to be more confusion in this thread about it all as well:

This even spun out a website to attempt to tell people how they can set everything up:

Yet when I try and use that config without having any additional dependencies installed directly within our own package.json file, it fails with the following:

⇒  npx eslint --print-config src/index.tsx

Oops! Something went wrong! :(

ESLint: 7.25.0

ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct.

The config "react-app" was referenced from the config file in "/Users/devalias/dev/sparkle/sparkle/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

Based on facebook/create-react-app#9083 (comment) I tried deleting the entire package-lock.json file and 'starting from scratch' locally to see if it would work, and it seems like it did:

⇒  npx eslint --print-config src/index.tsx
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "globals": {},
  "parser": "/Users/devalias/dev/sparkle/sparkle/node_modules/@typescript-eslint/parser/dist/index.js",
  "parserOptions": {
   // ..snip..

So I guess the next question is how can we 'clean up' the existing package-lock.json file so it doesn't have any issues..?

@0xdevalias 0xdevalias temporarily deployed to feature-preview May 4, 2021 04:03 Inactive
@0xdevalias 0xdevalias changed the title Bump react-scripts from 3.4.1 to 4.0.3 Bump react-scripts from 3.4.1 to 4.0.3 + fix associated tech debt May 4, 2021
@0xdevalias 0xdevalias marked this pull request as ready for review May 4, 2021 04:09
@0xdevalias 0xdevalias requested review from a team as code owners May 4, 2021 04:09
Copy link
Contributor Author

@0xdevalias 0xdevalias left a comment

Choose a reason for hiding this comment

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

[note] Some notes to explain various aspects of this PR to make reviewing easier.

Note also that the mass of changes to package-lock.diff are due to react-scripts (and all of the dependencies it wraps up) changing version (as we intended), as can be seen in dbeb394

functions/venue.js Show resolved Hide resolved
package.json Show resolved Hide resolved
src/hooks/useFirestoreConnect.ts Show resolved Hide resolved
src/serviceWorker.js Show resolved Hide resolved
tsconfig.json Show resolved Hide resolved
package.json Show resolved Hide resolved
@0xdevalias
Copy link
Contributor Author

Before

⇒  npm i
npm WARN [email protected] requires a peer of @typescript-eslint/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @typescript-eslint/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || 2.x but none is installed. You must install peer dependencies yourself.
npm WARN The package @types/styled-components is included as both a dev and production dependency.

audited 2827 packages in 9.807s

91 packages are looking for funding
  run `npm fund` for details

found 5137 vulnerabilities (5097 low, 5 moderate, 35 high)
  run `npm audit fix` to fix them, or `npm audit` for details
⇒  npm run build

> [email protected] build /Users/devalias/dev/sparkle/sparkle
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  628.17 KB  build/static/js/2.2a99c644.chunk.js
  107.98 KB  build/static/js/main.2df18998.chunk.js
  97.27 KB   build/static/css/main.aade0aa4.chunk.css
  9.45 KB    build/static/js/3.c0da807d.chunk.js
  1.17 KB    build/static/js/runtime-main.d2e9ab6b.js

image

After

⇒  npm i
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN The package @types/styled-components is included as both a dev and production dependency.

audited 3319 packages in 11.484s

166 packages are looking for funding
  run `npm fund` for details

found 471 vulnerabilities (434 low, 1 moderate, 36 high)
  run `npm audit fix` to fix them, or `npm audit` for details
⇒  npm run build

> [email protected] build /Users/devalias/dev/sparkle/sparkle
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  630.06 KB  build/static/js/2.d00b77b8.chunk.js
  130.2 KB   build/static/css/main.9b7a5c6f.chunk.css
  117.31 KB  build/static/js/main.44653ba0.chunk.js
  9.49 KB    build/static/js/3.1e276629.chunk.js
  1.17 KB    build/static/js/runtime-main.d0e24706.js

Note: I believe the slight increase in size shown in this bundle is due to moving some of the image assets from public/ (where they won't have been reported in this bundle size) to being properly included as part of the bundle (using the recommended/best practice method of 'importing' the image files in the code, rather than referencing them with 'magic strings')

image

@0xdevalias
Copy link
Contributor Author

https://create-react-app.dev/docs/supported-browsers-features/

Note that this project includes no polyfills by default.

If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.


https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers

The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The production list will be used when creating a production build by running the build script, and the development list will be used when running the start script. You can use https://browserl.ist to see the browsers supported by your configured browserslist.

Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.


https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md#polyfilling-other-language-features

You can also polyfill stable language features not available in your target browsers. If you're using this in Create React App, it will automatically use the browserslist you've defined to only include polyfills needed by your target browsers when importing the stable polyfill. Make sure to follow the Internet Explorer steps above if you need to support Internet Explorer in your application.

// This must be the first line in src/index.js
import 'react-app-polyfill/stable';

If you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the ie9 or ie11 and stable modules:

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

We seem to already have this via react-scripts:

⇒  npm ls react-app-polyfill
[email protected] /Users/devalias/dev/sparkle/sparkle
└─┬ [email protected]
  └── [email protected]


https://babeljs.io/docs/en/babel-preset-env.html

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

This seems to already be included via react-scripts -> babel-preset-react-app:

⇒  npm ls @babel/preset-env

[email protected] /Users/devalias/dev/sparkle/sparkle
└─┬ [email protected]
  ├─┬ @svgr/[email protected]
  │ └── @babel/[email protected]
  ├─┬ [email protected]
  │ └── @babel/[email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── @babel/[email protected]  deduped

https://babeljs.io/docs/en/babel-preset-env.html#bugfixes

Note: These optimizations will be enabled by default in Babel 8

By default, @babel/preset-env (and Babel plugins in general) grouped ECMAScript syntax features into collections of closely related smaller features. These groups can be large and include a lot of edge cases, for example "function arguments" includes destructured, default and rest parameters. From this grouping information, Babel enables or disables each group based on the browser support target you specify to @babel/preset-env’s targets option.

When this option is enabled, @babel/preset-env tries to compile the broken syntax to the closest non-broken modern syntax supported by your target browsers. Depending on your targets and on how many modern syntax you are using, this can lead to a significant size reduction in the compiled app. This option merges the features of @babel/preset-modules without having to use another preset.

https://babeljs.io/docs/en/babel-preset-env.html#usebuiltins

This option configures how @babel/preset-env handles polyfills.

When either the usage or entry options are used, @babel/preset-env will add direct references to core-js modules as bare imports (or requires). This means core-js will be resolved relative to the file itself and needs to be accessible.

Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

https://babeljs.io/docs/en/babel-preset-env.html#corejs

This option only has an effect when used alongside useBuiltIns: usage or useBuiltIns: entry, and ensures @babel/preset-env injects the polyfills supported by your core-js version. It is recommended to specify the minor version otherwise "3" will be interpreted as "3.0" which may not include polyfills for the latest features.

By default, only polyfills for stable ECMAScript features are injected: if you want to polyfill proposals, you have three different options:

@0xdevalias 0xdevalias temporarily deployed to feature-preview May 4, 2021 06:19 Inactive
@0xdevalias 0xdevalias force-pushed the devalias/deps-upgrade-react-scripts branch from cb80ed4 to 1d578f2 Compare May 4, 2021 07:15
@0xdevalias 0xdevalias force-pushed the devalias/deps-upgrade-react-scripts branch from 1d578f2 to b143afa Compare May 4, 2021 07:22
@0xdevalias 0xdevalias temporarily deployed to feature-preview May 4, 2021 07:22 Inactive
@0xdevalias 0xdevalias added the 💻 eng-QoL Engineering Quality of Life (QoL). Scripts, bots, automations, etc; that ensure our standards label May 4, 2021
Copy link
Contributor

@mike-lvov mike-lvov left a comment

Choose a reason for hiding this comment

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

A few notes/questions

Comment on lines 147 to 153
const clearSearchIcon = (
<img
className="NavSearchBar__clear-search"
src={CloseIcon}
src={navDropdownCloseIcon}
alt="close button"
onClick={clearSearchQuery}
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Wouldn't it be nicer to remove it & use font awesome instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Potentially, though @mcflyok tends not to like the font awesome iconography in general I believe.

This was just renaming the variable name of existing code, not intending to change logic in this PR.

takeSeat(null, null);
};
const leaveSeat = useCallback(() => {
takeSeat(null, null);
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess we use null here because the implementation with undefined is not merged?

Copy link
Contributor Author

@0xdevalias 0xdevalias May 6, 2021

Choose a reason for hiding this comment

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

Where is the implementation with undefined out of curiosity?

I didn't seek to change any of the existing functionality in this PR, so I left it as what it was.

@0xdevalias 0xdevalias temporarily deployed to feature-preview May 6, 2021 07:21 Inactive
Copy link
Contributor Author

@0xdevalias 0xdevalias left a comment

Choose a reason for hiding this comment

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

Looks good to me (let's see if this satisfies the CODEOWNERS rule for @sparkletown/engineering-leads)


Edit: Seemingly it doesn't, and is a long outstanding issue: https://github.community/t/do-not-require-owner-approval-if-the-pull-request-is-from-an-owner/369/64

Temporarily disabled the 'require CODEOWNERS' branch protection to get around this.

@0xdevalias 0xdevalias removed the request for review from a team May 6, 2021 07:29
@0xdevalias 0xdevalias merged commit 5b6d4a0 into staging May 6, 2021
@0xdevalias 0xdevalias deleted the devalias/deps-upgrade-react-scripts branch May 6, 2021 07:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file 💻 eng-QoL Engineering Quality of Life (QoL). Scripts, bots, automations, etc; that ensure our standards 💎 styles For (S)CSS style related issues/changes/improvements/etc. 💥 tech-debt
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants