slow frontend upgrade #2260

id2359 · 2022-11-01T05:09:49Z

Trying to upgrade using ncu caused major issues ( jest fails etc)

Will try a more targeted approach to fixing the dependabot issues

id2359 · 2022-11-01T05:27:46Z

Branched from next_release and tried to build frontend:

cicproms@2.0.0 build /app/rdrf/rdrf/frontend
react-scripts build

Creating an optimized production build...
Failed to compile.

./src/index.tsx
Error: [BABEL] /app/rdrf/rdrf/frontend/src/index.tsx: Cannot find module '@babel/helper-environment-visitor' (While processing: "/app/rdrf/rdrf/frontend/node_modules/babel-preset-react-app/index.js")

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cicproms@2.0.0 build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cicproms@2.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /data/.npm/_logs/2022-11-01T05_26_00_023Z-debug.log

id2359 · 2022-11-01T06:09:16Z

to "fix" this I deleted node_modules in the container and re-ran npm run build which worked

id2359 · 2022-11-01T06:54:38Z

Upgraded RDRF node docker container from 10.16.3 to 18.12.0
installed npm-check-updates and ran:
@testing-library/react ^11.2.5 → ^13.4.0
@types/jest 25.1.4 → 29.2.1
@types/lodash ^4.14.149 → ^4.14.187
@types/node 13.9.0 → 18.11.8
@types/rc-slider ^8.6.5 → ^9.3.0
@types/rc-tooltip ^3.7.2 → ^3.7.7
@types/react 16.9.23 → 18.0.24
@types/react-dom 16.9.5 → 18.0.8
@types/react-redux ^7.1.7 → ^7.1.24
@types/reactstrap ^8.4.2 → ^8.7.1
@types/redux-actions ^2.6.1 → ^2.6.2
axios ^0.21.2 → ^1.1.3
bootstrap ^4.4.1 → ^5.2.2
lodash ^4.17.19 → ^4.17.21
npm-watch ^0.9.0 → ^0.11.0
prettier ^2.2.1 → ^2.7.1
rc-slider ^9.2.2 → ^10.0.1
rc-tooltip ^4.0.1 → ^5.2.2
react ^16.13.0 → ^18.2.0
react-device-detect ^1.11.14 → ^2.2.2
react-dom ^16.13.0 → ^18.2.0
react-icons ^3.9.0 → ^4.6.0
react-redux ^7.2.0 → ^8.0.4
react-scripts 4.0.3 → 5.0.1
reactstrap ^8.4.1 → ^9.1.5
redux ^4.0.5 → ^4.2.0
redux-thunk ^2.3.0 → ^2.4.1
renamer ^1.1.4 → ^4.0.0
typescript 3.8.3 → 4.8.4
yarn ^1.22.4 → ^1.22.19

id2359 · 2022-11-01T06:58:39Z

NOT applying the updates above but just doing the following

on Node 18.12.0 container

rm -rf node_modules
yarn install
npm run test ( all pass)

BUT

npm run build fails with

root@f07e75f8551f:/app/rdrf/rdrf/frontend# npm run build

> cicproms@2.0.0 build
> react-scripts build

node:internal/modules/cjs/loader:535
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /app/rdrf/rdrf/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:393:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
    at resolveExports (node:internal/modules/cjs/loader:529:36)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/app/rdrf/rdrf/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.12.0

npm run test passes

but

id2359 · 2022-11-01T07:09:48Z

removed yarn.lock
removed node_modules
ran yarn install
observe many warnings..:

root@f07e75f8551f:/app/rdrf/rdrf/frontend# rm yarn.lock
root@f07e75f8551f:/app/rdrf/rdrf/frontend# rm -rf node_modules/
root@f07e75f8551f:/app/rdrf/rdrf/frontend# yarn install
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning @types/reactstrap@8.7.2: This is a stub types definition. reactstrap provides its own type definitions, so you do not need this installed.
warning react-scripts > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning react-scripts > webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning react-scripts > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning react-scripts > workbox-webpack-plugin > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > @pmmmwh/react-refresh-webpack-plugin > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning react-scripts > workbox-webpack-plugin > workbox-build > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
warning react-scripts > webpack-dev-server > webpack-log > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning react-scripts > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > resolve-url-loader > rework > css > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning react-scripts > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning react-scripts > babel-jest > @jest/transform > jest-haste-map > sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning react-scripts > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning react-scripts > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning react-scripts > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning react-scripts > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
warning react-scripts > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
warning reactstrap > react-popper > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see palantir/tslint#4534 for more information.
warning tslint-react@4.2.0: TSLint has been deprecated in favor of ESLint. Please see palantir/tslint-react#210 for more information.
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > bootstrap@4.6.2" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.6.2" has unmet peer dependency "popper.js@^1.16.1".
warning " > tslint-react@4.2.0" has incorrect peer dependency "tslint@^5.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 81.02s.

ran npm run test which now fails ..:

 FAIL  src/pages/proms_page/components/question.unit.test.tsx
  ● Test suite failed to run

    Cannot find module '/app/rdrf/rdrf/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'src/pages/proms_page/components/question.unit.test.tsx'

      1 | // Question.unit.test.tsx
      2 |
    > 3 | import * as React from 'react';
        |                              ^
      4 | import ReactDOM from 'react-dom';
      5 | import Question from './question';
      6 | import * as Logic from '../logic';

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (src/pages/proms_page/components/question.unit.test.tsx:3:30)

 FAIL  src/app/app.unit.test.tsx
  ● Test suite failed to run

    Cannot find module '/app/rdrf/rdrf/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireWildcard' from 'src/app/app.unit.test.tsx'

      1 | import * as React from "react";
      2 | import { render, screen, fireEvent } from "@testing-library/react";
    > 3 | import { Provider } from "react-redux";
        |                               ^
      4 | import { applyMiddleware, compose, createStore } from "redux";
      5 | import thunk from "redux-thunk";
      6 | import moxios from "moxios";

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (src/app/app.unit.test.tsx:3:31)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total


Time:        0.646 s, estimated 2 s

then tried npm run build and received permission error?

root@f07e75f8551f:/app/rdrf/rdrf/frontend# npm run build

> cicproms@2.0.0 build
> react-scripts build

Failed to compile.

EACCES: permission denied, rmdir '/app/rdrf/rdrf/frontend/build/static/css'

id2359 · 2022-11-02T01:06:49Z

Given the build folder is not used in prod, should just make /data/frontendbuild for the bundles and change postbuild

id2359 · 2022-11-02T01:35:45Z

Adding prebuild action

id2359 · 2022-11-02T01:35:51Z

Adding prebuild action

id2359 · 2022-11-02T01:39:42Z

Adding prebuild action

id2359 · 2022-11-02T02:26:49Z

Added prebuild step to build in /data/frontend/build ( where data is mounted as /data/dev in dev env.
Made user node in the node Dockerfile ( using node 18..12.0)

ran
./develop.sh run node "" build

error:

lee@norn:~/src/rdrf$ ./develop.sh run "" node build
  [INFO] run docker-compose.yml
  [INFO] GIT_BRANCH: rdrf-2260
  [INFO] GIT_HEAD_TAG: 
  [INFO] GIT_LATEST_TAG: sjoglcmidland
  [ OK ] BUILD_VERSION: rdrf-2260-post-sjoglcmidland
+ exec docker-compose --project-name rdrf -f docker-compose.yml run --rm node build
Starting rdrf_datadev_1 ... done
HOME=/data
HOSTNAME=46ea1a1244a8
NODE_VERSION=18.12.0
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PWD=/app/rdrf/rdrf/frontend
SHLVL=0
TERM=xterm
YARN_CACHE_FOLDER=/opt/yarn_cache
YARN_VERSION=1.22.19
_=/usr/bin/env
  [INFO] [Run] Building frontend JS bundle
  [INFO] BUILD_VERSION 
  [INFO] PROJECT_SOURCE 
+ yarn install --frozen-lockfile
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > bootstrap@4.6.0" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
warning " > tslint-react@4.2.0" has incorrect peer dependency "tslint@^5.1.0".
[4/4] Building fresh packages...
Done in 3.54s.
+ npm run build

> cicproms@2.0.0 prebuild
> ./prebuild.sh

running prebuild

> cicproms@2.0.0 build
> BUILD_PATH='/data/frontend/build' react-scripts build

node:internal/modules/cjs/loader:535
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /app/rdrf/rdrf/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:393:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
    at resolveExports (node:internal/modules/cjs/loader:529:36)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/app/rdrf/rdrf/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.12.0

id2359 · 2022-11-02T02:58:31Z

yarn added postcss-safe-parser but this still failed as postcss-safe-parser is installed as a dep of react-scripts.
checking docs at https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md

shows how to update react-scripts from 4.0.3 to 5.0.1:

node@4b0bd03ed2a0:/app/rdrf/rdrf/frontend$ yarn add --exact react-scripts@5.0.1
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > bootstrap@4.6.0" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
warning " > tslint-react@4.2.0" has incorrect peer dependency "tslint@^5.1.0".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 449 new dependencies.
info Direct dependencies
└─ react-scripts@5.0.1
info All dependencies
├─ @ampproject/remapping@2.2.0
├─ @babel/core@7.19.6
├─ @babel/eslint-parser@7.19.1
├─ @babel/generator@7.20.1
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.18.9
├─ @babel/helper-compilation-targets@7.20.0
├─ @babel/helper-explode-assignable-expression@7.18.6
├─ @babel/helper-module-imports@7.18.6
├─ @babel/helper-string-parser@7.19.4
├─ @babel/helpers@7.20.1
├─ @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.18.9
├─ @babel/plugin-proposal-async-generator-functions@7.20.1
├─ @babel/plugin-proposal-class-properties@7.18.6
├─ @babel/plugin-proposal-class-static-block@7.18.6
├─ @babel/plugin-proposal-decorators@7.20.0
├─ @babel/plugin-proposal-dynamic-import@7.18.6
├─ @babel/plugin-proposal-export-namespace-from@7.18.9
├─ @babel/plugin-proposal-json-strings@7.18.6
├─ @babel/plugin-proposal-logical-assignment-operators@7.18.9
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.18.6
├─ @babel/plugin-proposal-numeric-separator@7.18.6
├─ @babel/plugin-proposal-object-rest-spread@7.19.4
├─ @babel/plugin-proposal-optional-catch-binding@7.18.6
├─ @babel/plugin-proposal-private-methods@7.18.6
├─ @babel/plugin-proposal-private-property-in-object@7.18.6
├─ @babel/plugin-syntax-decorators@7.19.0
├─ @babel/plugin-syntax-flow@7.18.6
├─ @babel/plugin-syntax-import-assertions@7.20.0
├─ @babel/plugin-syntax-jsx@7.18.6
├─ @babel/plugin-syntax-typescript@7.20.0
├─ @babel/plugin-transform-arrow-functions@7.18.6
├─ @babel/plugin-transform-async-to-generator@7.18.6
├─ @babel/plugin-transform-block-scoped-functions@7.18.6
├─ @babel/plugin-transform-block-scoping@7.20.0
├─ @babel/plugin-transform-classes@7.19.0
├─ @babel/plugin-transform-computed-properties@7.18.9
├─ @babel/plugin-transform-destructuring@7.20.0
├─ @babel/plugin-transform-duplicate-keys@7.18.9
├─ @babel/plugin-transform-exponentiation-operator@7.18.6
├─ @babel/plugin-transform-flow-strip-types@7.19.0
├─ @babel/plugin-transform-for-of@7.18.8
├─ @babel/plugin-transform-function-name@7.18.9
├─ @babel/plugin-transform-literals@7.18.9
├─ @babel/plugin-transform-member-expression-literals@7.18.6
├─ @babel/plugin-transform-modules-amd@7.19.6
├─ @babel/plugin-transform-modules-commonjs@7.19.6
├─ @babel/plugin-transform-modules-systemjs@7.19.6
├─ @babel/plugin-transform-modules-umd@7.18.6
├─ @babel/plugin-transform-named-capturing-groups-regex@7.19.1
├─ @babel/plugin-transform-new-target@7.18.6
├─ @babel/plugin-transform-object-super@7.18.6
├─ @babel/plugin-transform-property-literals@7.18.6
├─ @babel/plugin-transform-react-display-name@7.18.6
├─ @babel/plugin-transform-react-jsx-development@7.18.6
├─ @babel/plugin-transform-react-pure-annotations@7.18.6
├─ @babel/plugin-transform-regenerator@7.18.6
├─ @babel/plugin-transform-reserved-words@7.18.6
├─ @babel/plugin-transform-runtime@7.19.6
├─ @babel/plugin-transform-shorthand-properties@7.18.6
├─ @babel/plugin-transform-spread@7.19.0
├─ @babel/plugin-transform-sticky-regex@7.18.6
├─ @babel/plugin-transform-template-literals@7.18.9
├─ @babel/plugin-transform-typeof-symbol@7.18.9
├─ @babel/plugin-transform-typescript@7.20.0
├─ @babel/plugin-transform-unicode-escapes@7.18.10
├─ @babel/plugin-transform-unicode-regex@7.18.6
├─ @babel/preset-env@7.19.4
├─ @babel/preset-modules@0.1.5
├─ @babel/preset-react@7.18.6
├─ @babel/preset-typescript@7.18.6
├─ @csstools/normalize.css@12.0.0
├─ @csstools/postcss-cascade-layers@1.1.1
├─ @csstools/postcss-color-function@1.1.1
├─ @csstools/postcss-font-format-keywords@1.0.1
├─ @csstools/postcss-hwb-function@1.0.2
├─ @csstools/postcss-ic-unit@1.0.1
├─ @csstools/postcss-is-pseudo-class@2.0.7
├─ @csstools/postcss-nested-calc@1.0.0
├─ @csstools/postcss-normalize-display-values@1.0.1
├─ @csstools/postcss-oklab-function@1.1.1
├─ @csstools/postcss-stepped-value-functions@1.0.1
├─ @csstools/postcss-text-decoration-shorthand@1.0.0
├─ @csstools/postcss-trigonometric-functions@1.0.2
├─ @csstools/postcss-unset-value@1.0.2
├─ @eslint/eslintrc@1.3.3
├─ @humanwhocodes/config-array@0.11.7
├─ @humanwhocodes/module-importer@1.0.1
├─ @humanwhocodes/object-schema@1.2.1
├─ @jest/globals@27.5.1
├─ @jest/reporters@27.5.1
├─ @jest/test-sequencer@27.5.1
├─ @jridgewell/gen-mapping@0.3.2
├─ @jridgewell/resolve-uri@3.1.0
├─ @jridgewell/set-array@1.1.2
├─ @jridgewell/source-map@0.3.2
├─ @leichtgewicht/ip-codec@2.0.4
├─ @nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.walk@1.2.8
├─ @pmmmwh/react-refresh-webpack-plugin@0.5.8
├─ @rollup/plugin-babel@5.3.1
├─ @rollup/plugin-node-resolve@11.2.1
├─ @rollup/plugin-replace@2.4.2
├─ @rushstack/eslint-patch@1.2.0
├─ @sinclair/typebox@0.24.51
├─ @sinonjs/fake-timers@8.1.0
├─ @surma/rollup-plugin-off-main-thread@2.2.3
├─ @svgr/webpack@5.5.0
├─ @tootallnate/once@1.1.2
├─ @trysound/sax@0.2.0
├─ @types/babel__core@7.1.19
├─ @types/body-parser@1.19.2
├─ @types/bonjour@3.5.10
├─ @types/connect-history-api-fallback@1.3.5
├─ @types/connect@3.4.35
├─ @types/eslint-scope@3.7.4
├─ @types/eslint@8.4.9
├─ @types/express-serve-static-core@4.17.31
├─ @types/express@4.17.14
├─ @types/html-minifier-terser@6.1.0
├─ @types/http-proxy@1.17.9
├─ @types/mime@3.0.1
├─ @types/prettier@2.7.1
├─ @types/range-parser@1.2.4
├─ @types/resolve@1.17.1
├─ @types/retry@0.12.0
├─ @types/semver@7.3.13
├─ @types/serve-index@1.9.1
├─ @types/serve-static@1.15.0
├─ @types/sockjs@0.3.33
├─ @types/trusted-types@2.0.2
├─ @types/ws@8.5.3
├─ @typescript-eslint/eslint-plugin@5.42.0
├─ @typescript-eslint/experimental-utils@5.42.0
├─ @typescript-eslint/parser@5.42.0
├─ @typescript-eslint/type-utils@5.42.0
├─ @webassemblyjs/floating-point-hex-parser@1.11.1
├─ @webassemblyjs/helper-numbers@1.11.1
├─ @webassemblyjs/helper-wasm-section@1.11.1
├─ @webassemblyjs/wasm-edit@1.11.1
├─ @webassemblyjs/wasm-opt@1.11.1
├─ @webassemblyjs/wast-printer@1.11.1
├─ acorn-import-assertions@1.8.0
├─ acorn-jsx@5.3.2
├─ acorn-node@1.8.2
├─ acorn-walk@7.2.0
├─ acorn@8.8.1
├─ address@1.2.1
├─ adjust-sourcemap-loader@4.0.0
├─ arg@5.0.2
├─ array.prototype.flat@1.3.0
├─ array.prototype.flatmap@1.3.0
├─ async@3.2.4
├─ autoprefixer@10.4.13
├─ axe-core@4.5.1
├─ babel-jest@27.5.1
├─ babel-loader@8.2.5
├─ babel-plugin-jest-hoist@27.5.1
├─ babel-plugin-macros@3.1.0
├─ babel-plugin-named-asset-import@0.3.8
├─ babel-plugin-transform-react-remove-prop-types@0.4.24
├─ babel-preset-jest@27.5.1
├─ body-parser@1.20.1
├─ bonjour-service@1.0.14
├─ camel-case@4.1.2
├─ camelcase-css@2.0.1
├─ case-sensitive-paths-webpack-plugin@2.4.0
├─ chokidar@3.5.3
├─ cjs-module-lexer@1.2.2
├─ clean-css@5.3.1
├─ cliui@7.0.4
├─ combined-stream@1.0.8
├─ common-path-prefix@3.0.0
├─ confusing-browser-globals@1.0.11
├─ connect-history-api-fallback@2.0.0
├─ content-disposition@0.5.4
├─ cookie@0.5.0
├─ core-js-pure@3.26.0
├─ core-js@3.26.0
├─ css-blank-pseudo@3.0.3
├─ css-declaration-sorter@6.3.1
├─ css-has-pseudo@3.0.4
├─ css-loader@6.7.1
├─ css-minimizer-webpack-plugin@3.4.1
├─ css-prefers-color-scheme@6.0.3
├─ css-what@6.1.0
├─ cssdb@7.0.2
├─ cssnano-preset-default@5.2.13
├─ cssnano@5.1.14
├─ damerau-levenshtein@1.0.8
├─ default-gateway@6.0.3
├─ define-lazy-prop@2.0.0
├─ defined@1.0.1
├─ detect-port-alt@1.1.6
├─ detective@5.2.1
├─ didyoumean@1.2.2
├─ diff-sequences@27.5.1
├─ dlv@1.1.3
├─ dns-packet@5.4.0
├─ dom-converter@0.2.0
├─ dom-serializer@1.4.1
├─ domutils@2.8.0
├─ dotenv-expand@5.1.0
├─ dotenv@10.0.0
├─ duplexer@0.1.2
├─ ejs@3.1.8
├─ electron-to-chromium@1.4.284
├─ enhanced-resolve@5.10.0
├─ es-module-lexer@0.9.3
├─ eslint-config-react-app@7.0.1
├─ eslint-import-resolver-node@0.3.6
├─ eslint-module-utils@2.7.4
├─ eslint-plugin-flowtype@8.0.3
├─ eslint-plugin-import@2.26.0
├─ eslint-plugin-jest@25.7.0
├─ eslint-plugin-jsx-a11y@6.6.1
├─ eslint-plugin-react-hooks@4.6.0
├─ eslint-plugin-react@7.31.10
├─ eslint-plugin-testing-library@5.9.1
├─ eslint-webpack-plugin@3.2.0
├─ eslint@8.26.0
├─ events@3.3.0
├─ express@4.18.2
├─ fast-glob@3.2.12
├─ file-loader@6.2.0
├─ filelist@1.0.4
├─ filesize@8.0.7
├─ finalhandler@1.2.0
├─ fork-ts-checker-webpack-plugin@6.5.2
├─ form-data@3.0.1
├─ forwarded@0.2.0
├─ fraction.js@4.2.0
├─ fs-extra@9.1.0
├─ fs-monkey@1.0.3
├─ function.prototype.name@1.1.5
├─ get-caller-file@2.0.5
├─ get-stream@6.0.1
├─ get-symbol-description@1.0.0
├─ globby@11.1.0
├─ grapheme-splitter@1.0.4
├─ gzip-size@6.0.0
├─ has-bigints@1.0.2
├─ html-entities@2.3.3
├─ html-minifier-terser@6.1.0
├─ html-webpack-plugin@5.5.0
├─ htmlparser2@6.1.0
├─ http-proxy-agent@4.0.1
├─ http-proxy-middleware@2.0.6
├─ http-proxy@1.18.1
├─ https-proxy-agent@5.0.1
├─ human-signals@2.1.0
├─ identity-obj-proxy@3.0.0
├─ immer@9.0.16
├─ ipaddr.js@2.0.1
├─ is-core-module@2.11.0
├─ is-negative-zero@2.0.2
├─ is-plain-obj@3.0.0
├─ is-potential-custom-element-name@1.0.1
├─ is-root@2.1.0
├─ is-shared-array-buffer@1.0.2
├─ is-weakref@1.0.2
├─ istanbul-lib-instrument@5.2.1
├─ istanbul-reports@3.1.5
├─ jake@10.8.5
├─ jest-changed-files@27.5.1
├─ jest-circus@27.5.1
├─ jest-cli@27.5.1
├─ jest-docblock@27.5.1
├─ jest-jasmine2@27.5.1
├─ jest-leak-detector@27.5.1
├─ jest-resolve-dependencies@27.5.1
├─ jest-serializer@27.5.1
├─ jest-watch-typeahead@1.1.0
├─ jest-watcher@28.1.3
├─ jest@27.5.1
├─ js-sdsl@4.1.5
├─ jsdom@16.7.0
├─ json-schema@0.4.0
├─ jsonpointer@5.0.1
├─ lilconfig@2.0.6
├─ loader-runner@4.3.0
├─ locate-path@6.0.0
├─ lodash.merge@4.6.2
├─ lodash.sortby@4.7.0
├─ memfs@3.4.9
├─ mini-css-extract-plugin@2.6.1
├─ multicast-dns@7.2.5
├─ nanoid@3.3.4
├─ natural-compare-lite@1.4.0
├─ node-forge@1.3.1
├─ node-releases@2.0.6
├─ normalize-url@6.1.0
├─ npm-run-path@4.0.1
├─ nth-check@2.1.1
├─ object-hash@3.0.0
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.hasown@1.1.1
├─ onetime@5.1.2
├─ open@8.4.0
├─ p-locate@5.0.0
├─ p-retry@4.6.2
├─ param-case@3.0.4
├─ pify@2.3.0
├─ pirates@4.0.5
├─ pkg-up@3.1.0
├─ postcss-attribute-case-insensitive@5.0.2
├─ postcss-browser-comments@4.0.0
├─ postcss-calc@8.2.4
├─ postcss-clamp@4.1.0
├─ postcss-color-functional-notation@4.2.4
├─ postcss-color-hex-alpha@8.0.4
├─ postcss-color-rebeccapurple@7.1.1
├─ postcss-colormin@5.3.0
├─ postcss-convert-values@5.1.3
├─ postcss-custom-media@8.0.2
├─ postcss-custom-properties@12.1.10
├─ postcss-custom-selectors@6.0.3
├─ postcss-dir-pseudo-class@6.0.5
├─ postcss-discard-comments@5.1.2
├─ postcss-discard-duplicates@5.1.0
├─ postcss-discard-empty@5.1.1
├─ postcss-discard-overridden@5.1.0
├─ postcss-double-position-gradients@3.1.2
├─ postcss-env-function@4.0.6
├─ postcss-flexbugs-fixes@5.0.2
├─ postcss-focus-visible@6.0.4
├─ postcss-focus-within@5.0.4
├─ postcss-font-variant@5.0.0
├─ postcss-gap-properties@3.0.5
├─ postcss-image-set-function@4.0.7
├─ postcss-import@14.1.0
├─ postcss-initial@4.0.1
├─ postcss-js@4.0.0
├─ postcss-lab-function@4.2.1
├─ postcss-load-config@3.1.4
├─ postcss-loader@6.2.1
├─ postcss-logical@5.0.4
├─ postcss-media-minmax@5.0.0
├─ postcss-merge-longhand@5.1.7
├─ postcss-merge-rules@5.1.3
├─ postcss-minify-font-values@5.1.0
├─ postcss-minify-gradients@5.1.1
├─ postcss-minify-params@5.1.4
├─ postcss-minify-selectors@5.2.1
├─ postcss-modules-extract-imports@3.0.0
├─ postcss-modules-local-by-default@4.0.0
├─ postcss-modules-scope@3.0.0
├─ postcss-modules-values@4.0.0
├─ postcss-nested@6.0.0
├─ postcss-nesting@10.2.0
├─ postcss-normalize-charset@5.1.0
├─ postcss-normalize-display-values@5.1.0
├─ postcss-normalize-positions@5.1.1
├─ postcss-normalize-repeat-style@5.1.1
├─ postcss-normalize-string@5.1.0
├─ postcss-normalize-timing-functions@5.1.0
├─ postcss-normalize-unicode@5.1.1
├─ postcss-normalize-url@5.1.0
├─ postcss-normalize-whitespace@5.1.1
├─ postcss-normalize@10.0.1
├─ postcss-opacity-percentage@1.1.2
├─ postcss-ordered-values@5.1.3
├─ postcss-overflow-shorthand@3.0.4
├─ postcss-page-break@3.0.4
├─ postcss-place@7.0.5
├─ postcss-preset-env@7.8.2
├─ postcss-pseudo-class-any-link@7.1.6
├─ postcss-reduce-initial@5.1.1
├─ postcss-reduce-transforms@5.1.0
├─ postcss-replace-overflow-wrap@4.0.0
├─ postcss-selector-not@6.0.1
├─ postcss-svgo@5.1.0
├─ postcss-unique-selectors@5.1.1
├─ postcss@8.4.18
├─ pretty-bytes@5.6.0
├─ pretty-error@4.0.0
├─ proxy-addr@2.0.7
├─ quick-lru@5.1.1
├─ raw-body@2.5.1
├─ react-app-polyfill@3.0.0
├─ react-dev-utils@12.0.1
├─ react-error-overlay@6.0.11
├─ react-refresh@0.11.0
├─ react-scripts@5.0.1
├─ read-cache@1.0.0
├─ readdirp@3.6.0
├─ recursive-readdir@2.2.3
├─ regenerator-runtime@0.13.10
├─ regenerator-transform@0.15.0
├─ regexp.prototype.flags@1.4.3
├─ renderkid@3.0.0
├─ resolve-url-loader@4.0.0
├─ resolve.exports@1.1.0
├─ retry@0.13.1
├─ rollup-plugin-terser@7.0.2
├─ rollup@2.79.1
├─ safe-regex-test@1.0.0
├─ safer-buffer@2.1.2
├─ sanitize.css@13.0.0
├─ sass-loader@12.6.0
├─ selfsigned@2.1.1
├─ serve-static@1.15.0
├─ shell-quote@1.7.4
├─ sockjs@0.3.24
├─ source-map-js@1.0.2
├─ source-map-loader@3.0.2
├─ string.prototype.matchall@4.0.7
├─ string.prototype.trimend@1.0.5
├─ string.prototype.trimstart@1.0.5
├─ strip-comments@2.0.1
├─ style-loader@3.3.1
├─ stylehacks@5.1.1
├─ supports-preserve-symlinks-flag@1.0.0
├─ tailwindcss@3.2.1
├─ tapable@2.2.1
├─ temp-dir@2.0.0
├─ tempy@0.6.0
├─ terser-webpack-plugin@5.3.6
├─ terser@5.15.1
├─ toidentifier@1.0.1
├─ tsconfig-paths@3.14.1
├─ unbox-primitive@1.0.2
├─ update-browserslist-db@1.0.10
├─ uuid@8.3.2
├─ v8-to-istanbul@8.1.1
├─ watchpack@2.4.0
├─ webpack-dev-middleware@5.3.3
├─ webpack-dev-server@4.11.1
├─ webpack-manifest-plugin@4.1.1
├─ webpack@5.74.0
├─ whatwg-fetch@3.6.2
├─ workbox-broadcast-update@6.5.4
├─ workbox-build@6.5.4
├─ workbox-google-analytics@6.5.4
├─ workbox-navigation-preload@6.5.4
├─ workbox-range-requests@6.5.4
├─ workbox-recipes@6.5.4
├─ workbox-streams@6.5.4
├─ workbox-sw@6.5.4
├─ workbox-webpack-plugin@6.5.4
├─ workbox-window@6.5.4
├─ wrap-ansi@7.0.0
├─ ws@8.10.0
├─ xtend@4.0.2
├─ y18n@5.0.8
├─ yargs-parser@20.2.9
└─ yargs@16.2.0
Done in 29.74s.
node@4b0bd03ed2a0:/app/rdrf/rdrf/frontend$

id2359 · 2022-11-02T03:01:52Z

Now running :

lee@norn:~/src/rdrf$ ./develop.sh run "" node build
  [INFO] run docker-compose.yml
  [INFO] GIT_BRANCH: rdrf-2260
  [INFO] GIT_HEAD_TAG: 
  [INFO] GIT_LATEST_TAG: sjoglcmidland
  [ OK ] BUILD_VERSION: rdrf-2260-post-sjoglcmidland
+ exec docker-compose --project-name rdrf -f docker-compose.yml run --rm node build
Starting rdrf_datadev_1 ... done
HOME=/data
HOSTNAME=e3f4aa89ea68
NODE_VERSION=18.12.0
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PWD=/app/rdrf/rdrf/frontend
SHLVL=0
TERM=xterm
YARN_CACHE_FOLDER=/opt/yarn_cache
YARN_VERSION=1.22.19
_=/usr/bin/env
  [INFO] [Run] Building frontend JS bundle
  [INFO] BUILD_VERSION 
  [INFO] PROJECT_SOURCE 
+ yarn install --frozen-lockfile
yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.24s.
+ npm run build

> cicproms@2.0.0 prebuild
> ./prebuild.sh

running prebuild

> cicproms@2.0.0 build
> BUILD_PATH='/data/frontend/build' react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

TS2339: Property 'disabled' does not exist on type 'HTMLElement'.
    271 |           expect.stringContaining("1")
    272 |         );
  > 273 |         expect(screen.getByText("Previous").disabled).toEqual(true);
        |                                             ^^^^^^^^
    274 |       });
    275 |
    276 |       /*

id2359 · 2022-11-02T05:32:45Z

odd behaviour:
./develop.sh run node "" test
passes
but ./develop.sh run node build
fails to build because of numerous typing errors.
I had to edit the tests to type the results of screen.getByText("Previous") to HTMLButtonElement , etc

id2359 · 2022-11-02T05:33:29Z

build runs
but now running into facebook/create-react-app#11963
Previously in 4.0.3 react-scripts we had vendor and runtime bundles but now only one?

id2359 · 2022-11-02T08:28:36Z

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

id2359 · 2022-11-02T08:39:17Z

https://stackoverflow.com/questions/55131928/yarn-upgrade-to-fix-yarn-audit-errors

id2359 · 2022-11-03T04:49:51Z

build failed:
[ OK ] BUILD_VERSION: rdrf-2260

exec docker-compose --project-name rdrf -f docker-compose.yml run --rm node test
Starting rdrf_datadev_1 ...
HOSTNAME=12512e7441a2
NODE_VERSION=18.12.0
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PWD=/app/rdrf/rdrf/frontend
SHLVL=0
TERM=xterm
YARN_CACHE_FOLDER=/data/yarn_cache
YARN_VERSION=1.22.19
_=/usr/bin/env
[INFO] [Run] Test the React components
yarn install v1.22.19
error Could not write file "/app/rdrf/rdrf/frontend/yarn-error.log": "EACCES: permission denied, open '/app/rdrf/rdrf/frontend/yarn-error.log'"
error An unexpected error occurred: "EACCES: permission denied, mkdir '/data/yarn_cache/v6'".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

cicproms@2.0.0 test
react-scripts test
sh: 1: react-scripts: not found

id2359 · 2022-11-03T06:12:24Z

running ./develop.sh run "" node test
in the dev environment works , only in Travis is this failing..

id2359 · 2022-11-04T03:46:46Z

So the travis build fails because the node user is uid 002 in travis not 001 as in dev

so node can write the Yarn logfile in dev as my user is 001

id2359 · 2022-11-04T07:52:37Z

At this commit the build passes because I've only upgraded react-scripts

I've created a branch ncutest branched off rdrf-2260 where I upgrade using ncu to upgrade more

This gave the dreaded Jest unexpected token error ( test suites wouldn't run)

https://stackoverflow.com/questions/55493322/create-react-app-jest-encountered-unexpected-token

this outlines a fix

( actually I saw here first https://dev.to/bytebodger/how-i-fixed-the-unexpected-token-error-in-jest-4o1j )

Now some tests are failing , I'll merge in and fix

id2359 · 2022-11-07T01:19:13Z

Build is at least running the tests .. https://app.travis-ci.com/github/muccg/rdrf/builds/257427283

id2359 self-assigned this Nov 1, 2022

id2359 added a commit that referenced this issue Nov 2, 2022

rdrf #2260 upgrade to react-scripts 5.0.1

f5ee8bc

id2359 added a commit that referenced this issue Nov 2, 2022

rdrf #2260 change yarn cache folder for build container

e2985ec

id2359 added a commit that referenced this issue Nov 2, 2022

rdrf #2260 yarn cache folder in docker compose

69e812d

id2359 added a commit that referenced this issue Nov 3, 2022

rdrf #2260 fixing build paths

b37949e

id2359 added a commit that referenced this issue Nov 3, 2022

rdrf #2260 yarn cache under /frontendbuild

9dbbf9a

id2359 added a commit that referenced this issue Nov 4, 2022

rdrf #2260 checking permissions on test

282ca9d

id2359 added a commit that referenced this issue Nov 4, 2022

rdrf #2260 back to running node as root..

0cfa8e8

id2359 added a commit that referenced this issue Nov 4, 2022

rdrf #2260 reverted build script changes

298f866

id2359 added a commit that referenced this issue Nov 4, 2022

rdrf #2260 removed tmp diagnostics

44a8492

id2359 added this to the M1 Frontend Updates milestone Nov 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

slow frontend upgrade #2260

slow frontend upgrade #2260

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 3, 2022

id2359 commented Nov 3, 2022

id2359 commented Nov 4, 2022

id2359 commented Nov 4, 2022

id2359 commented Nov 7, 2022

slow frontend upgrade #2260

slow frontend upgrade #2260

Comments

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 1, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 2, 2022

id2359 commented Nov 3, 2022

id2359 commented Nov 3, 2022

id2359 commented Nov 4, 2022

id2359 commented Nov 4, 2022

id2359 commented Nov 7, 2022