search

openfun / marsha

:clapper: An opensource LTI Learning Content Management System (LCMS)
MIT License
106 stars 24 forks source link

Unpin front dependencies react #2489

Closed kernicPanel closed 8 months ago

kernicPanel commented 8 months ago

Purpose

Since react has been manually updated to version 18, we forgot to unpin it along his related dependencies.

Proposal

Unpin and update react and related dependencies.

Also update and unpin typescript. As shown in https://github.com/openfun/marsha/pull/2489#issuecomment-1792127735 a warning appears when we build the site. This is due to the outdated create-react-app (https://github.com/facebook/create-react-app/issues/13080) Updating fork-ts-checker-webpack-plugin fixes this.

kernicPanel commented 8 months ago

Could we unpin typescript as well you think ?

https://github.com/openfun/marsha/blob/b228a34790c023a259677434ea74bf30671a3c6f/renovate.json#L29

After updating to typescript 5.2.2, lint and build-lti are ok. build-site gives some errors, but builds sucessfully:

nc@xps15 ~/p/f/m/s/frontend (unpin-front-dependencies-react)> yarn build-site
yarn run v1.22.19
$ yarn workspace standalone_site run build
$ craco build
Creating an optimized production build...
TypeError: Cannot set property mark of #<Object> which has only a getter
TypeError: Cannot set property mark of #<Object> which has only a getter
    at Object.connectTypeScriptPerformance (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/profile/TypeScriptPerformance.js:12:36)
    at createTypeScriptReporter (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/reporter/TypeScriptReporter.js:40:49)
    at Object.<anonymous> (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:21:30)
    at Generator.next (<anonymous>)
    at /home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:4:12)
    at /home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:19:88
    at Object.<anonymous> (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/RpcService.js:23:38)
    at Generator.next (<anonymous>)
TypeError: Cannot set property mark of #<Object> which has only a getter
TypeError: Cannot set property mark of #<Object> which has only a getter
    at Object.connectTypeScriptPerformance (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/profile/TypeScriptPerformance.js:12:36)
    at createTypeScriptReporter (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/typescript-reporter/reporter/TypeScriptReporter.js:40:49)
    at Object.<anonymous> (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:21:30)
    at Generator.next (<anonymous>)
    at /home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:4:12)
    at /home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/reporter/reporter-rpc/ReporterRpcService.js:19:88
    at Object.<anonymous> (/home/nc/projets/fun/marsha/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/RpcService.js:23:38)
    at Generator.next (<anonymous>)
Compiled successfully.

File sizes after gzip:

  1.59 MB   site/static/js/main.2b1c4544.js
  439.8 kB  site/static/css/main.8f2c9a60.css
  13.3 kB   site/static/js/462.c67cb2e3.chunk.js
  11.97 kB  site/static/js/915.5fd631ca.chunk.js
  11.97 kB  site/static/js/976.36fdc0be.chunk.js
  9.62 kB   site/static/js/133.8533b4ef.chunk.js
  4.58 kB   site/static/js/494.19a5dde8.chunk.js
  2.64 kB   site/static/js/872.c45bda69.chunk.js
  2.29 kB   site/static/js/622.f88e03b3.chunk.js
  1.49 kB   site/static/js/277.307b9e78.chunk.js
  1.29 kB   site/static/js/870.d3bb273f.chunk.js
  1.14 kB   site/static/js/125.d38fd648.chunk.js
  1.07 kB   site/static/js/57.81487a55.chunk.js
  518 B     site/static/js/749.3827de53.chunk.js
  385 B     site/static/js/600.e3b80803.chunk.js
  384 B     site/static/js/608.0c8828cd.chunk.js
  368 B     site/static/js/883.8f31d152.chunk.js
  342 B     site/static/js/311.d684781c.chunk.js

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The ../../../backend/marsha/static/js/build/site folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s ../../../backend/marsha/static/js/build/site

Find out more about deployment here:

  https://cra.link/deployment

$ ./postbuild.sh
Done in 45.69s.

I didn't run all the tests locally.

Let's try to push it to see how CI behaves.