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

[Spike] Update react-script to use version 5.0.0 #4232

Closed
TomNUSDS opened this issue Feb 7, 2022 · 6 comments
Closed

[Spike] Update react-script to use version 5.0.0 #4232

TomNUSDS opened this issue Feb 7, 2022 · 6 comments
Assignees
Labels
experience Team label to flag issues owned by the Experience Team frontend Work Type label to flag work related to the front-end websites tech-debt Anything that is purely a technical issue and does not affect functionality

Comments

@TomNUSDS
Copy link
Contributor

TomNUSDS commented Feb 7, 2022

Need to upgrade because 4.x depends on outdated libraries.
Upgrading from 4.x -> 5.x of react-script build breaks the build.
SimpleReport has done the upgrade. Examine how they've done it (seems like a lot of work).
Remove the "peerDependencies" and "resolutions" sections related to react-scripts once it's upgraded.

@TomNUSDS TomNUSDS added frontend Work Type label to flag work related to the front-end websites experience Team label to flag issues owned by the Experience Team tech-debt Anything that is purely a technical issue and does not affect functionality labels Feb 7, 2022
@meckila
Copy link
Contributor

meckila commented Feb 11, 2022

Spike Notes (until granted SharePoint access)
Relevant Scripts

"start:localdev": "env-cmd -f .env.development craco start",
"build:staging": "env-cmd -f .env.staging craco build",
"build:production": "env-cmd -f .env.production craco build",
"postbuild:staging": "cp build/index.html build/404.html",
"postbuild:production": "cp build/index.html build/404.html",
  • env-cmd →node program for executing commands using an environment from an env file

  • craco→configuration layer for create-react-app that allows for customization without using eject command from create-react-app

  • eject will remove create-react-app build dependency and copy all config files and transitive dependencies (webpack, babel, eslint, etc.) over for full control

  • react-scripts→scripts from create-react-app (kickstart project without config)

Error Reproduction Steps

cd react-frontend && 
yarn upgrade react-scripts@^ #pick 5.0.0, the latest
yarn start:localdev

Error Output:

ERROR in ./src/global.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[1].oneOf[7].use[5]!./src/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
6 │ @import '~uswds/dist/scss/theme/uswds-theme-general';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/global.scss 6:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
6 │ @import '~uswds/dist/scss/theme/uswds-theme-general';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/global.scss 6:9  root stylesheet
    at /Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass-loader/dist/index.js:54:16
    at Function.call$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:99012:16)
    at render_closure1.call$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:84527:12)
    at _RootZone.runBinary$3$3 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:29558:18)
    at _FutureListener.handleError$1 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28080:21)
    at _Future__propagateToListeners_handleError.call$0 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28387:49)
    at Object._Future__propagateToListeners (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:3901:77)
    at _Future._completeError$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28233:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:27881:12)
    at Object._asyncRethrow (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:3704:17)
 @ ./src/global.scss 8:6-465 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-435 83:0-435 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 8:0-23

ERROR in Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint-plugin-flowtype'
Require stack:
- /Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/eslint-config-react-app/index.js

webpack 5.68.0 compiled with 2 errors and 81 warnings in 23644 ms
No issues found.

Investigation Notes

  • React Scripts 4 to 5 Breaking Changes

    • create-react-app
    • babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
    • eslint-config-react-app, react-error-overlay, react-scripts
    • react-scripts
  • craco-sass-resources-loader is archived

    • Lets us load to the global.scss stylesheet
    • Layer of abstraction for style loaders?
    • sass-resources-loader uses sass-loader→ look into alternative resolution with craco config under style section? (sample from CRACO README.md documentation below)
    module.exports = {
        reactScriptsVersion: "react-scripts" /* (default value) */,
        style: {
            modules: {
                localIdentName: ""
            },
            sass: {
                loaderOptions: { /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */ },
                loaderOptions: (sassLoaderOptions, { env, paths }) => { return sassLoaderOptions; }
            },
    
    
  • Ejecting would be a nuclear option and require hands-on ownership of webpack.config

  • CRACO is not compatible with react-scripts 5 according to issue #378

  • Using the alpha 7 version of CRACO resulted in the same error

  • 2 versions of uswds exist, one explicitly as a package and another as a dependency of [react-uswds]( "uswds": "2.11.2",)

Saved Links
mswjs/msw#1030

@TomNUSDS
Copy link
Contributor Author

Sorry I'm just commenting. This is some GREAT research. Thanks!

What's your recommendation? Get rid of Craco and just use react-scripts or wait for a Craco update?

@meckila
Copy link
Contributor

meckila commented Feb 15, 2022

Sorry I'm just commenting. This is some GREAT research. Thanks!

What's your recommendation? Get rid of Craco and just use react-scripts or wait for a Craco update?

Removing the craco config and attempting to build without it resulted in the same error. Ejecting appears to be the only option if we want to update, but would recommend a technical discovery ticket on what it takes to eject and upgrade react-scripts.

@rachelhanster
Copy link

@bgantick @meckila @TomNUSDS Given the technical research into this, can you please describe work to be done in separate ticket?
cc @BerniXiongA6

@bgantick
Copy link
Contributor

I'll get next steps captured in a separate tech debt ticket and link it here.

@TomNUSDS
Copy link
Contributor Author

I think the recommended solution was to wait for craco to update their component to be compatible?
This would mean minimal work for us.

So far, we've been able to take security patches by using yarn's "resolutions"and "peerDependencies" feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
experience Team label to flag issues owned by the Experience Team frontend Work Type label to flag work related to the front-end websites tech-debt Anything that is purely a technical issue and does not affect functionality
Projects
None yet
Development

No branches or pull requests

5 participants