Maj tailwind

[cparthur]

Voici les étapes que j'ai suivi.

tldr;

• update tailwind à la v. 3
• update de react-script à la v. 5
• on utilise plus craco
• maj storybook pour ne plus utiliser craco

La difficulté a été de savoir que l'on avait plus besoin de craco avec la nouvelle version tailwind, ce qui n'est pas spécifié dans la doc.

---

https://tailwindcss.com/docs/upgrade-guide

https://stackoverflow.com/a/70683015/16408731

• TAILWIND

  • uninstall npm uninstall @craco/craco autoprefixer postcss tailwindcss postcss-cli @tailwindcss/postcss7-compat @tailwindcss/line-clamp
  • delete cracro.config.js
  • delete tailwind.config.js
  • follow https://tailwindcss.com/docs/upgrade-guide
  • npx tailwindcss init
  • merge previous tailwind config with new requirements
  • npm install --save react-scripts@latest v 5.0.1
    • (new source map error in console but build)

• STORYBOOK

  • remove craco from storybook
    • npm uninstall storybook-preset-craco
  • replace it by @storybook/preset-create-react-app in .storybook/main.js
  • update it to 4.0.0
  • run npx sb automigrate to not change storybook version but check whether we should migrate to webpack5 builders and apply the changes automatically
    • apply webpack 5 migration
  • it detect npm 8.11.0 which is incompatible witch Storybook so run the purposed npm7 migration
  • run storybook script but have a react-refresh error
    • ModuleNotFoundError: Module not found: Error: Cannot find module 'react-refresh'
    • test delete node_modules and package lock
    • now typescript error cause it update to 4.8.3 (wtf) even if 4.0.3 specified
    • downgrade to 4.0.3
    • it BUILDS 🎉🍾🤘
    • hot reload works both in dev and storybook 🤘
  • error with ESLint

[cparthur]

Y a un souci avec Matomo qui met plein d'erreurs dans le terminal.

jonkoops/matomo-tracker#710

[cparthur]

Il semble aussi il y avoir un problème avec avec ESLint et la nouvelle version de react-scripts qui empêche le build.

liens utiles:

• How to prevent failing to compile on CRA when eslint errors? facebook/create-react-app#10021 (comment)
• https://www.reddit.com/r/reactjs/comments/s1bchp/failed_to_compile_error_for_any_eslint_error_i/

J'ai pas test la solution du premier lien car ca me semble pas vraiment safe mais c'est peut etre la seule solution.

D'ailleurs j'ai vu que l'on utilisait les regles ESLint de google, c'est florian qui a mis ca non?
Et y a aussi une config eslint dans package json, je sais pas trop ce que ca fait la. J'ai test d'enlever pour test et ca build tjr pas.

[marc-rutkowski]

Effectivement le problème venait bien de la configuration eslint avec gts, qui rentrait en conflit ou écrasait la configuration par défaut de react-scripts. Et qui finalement le présentait pas grand intérêt.

J'ai remis ça d'aplomb et corrigé les erreurs et avertissements révélés par la nouvelle configuration.

J'ai aussi enlevé le tracker Matomo qui de toute façon ne fonctionnait pas et provoquait aussi des avertissements.
A voir si on le remet ultérieurement.

[cparthur]

Il y a eu un problème avec les storyshots qui ne se sont pas tous update (d'où les deux derniers commits).

Les erreurs étaient ciblées sur MUI et chartjs, pourtant je n'ai pas touché à ces composants et ni aux packages.

La seule différence est que les premiers tests ont été générés via la commande npm run test -> p -> story -> update alors que le deuxième commit a été généré avec la commande LANG=fr_FR npm test story -> update

Peut être faut-t-il rajouter une commande npm run storyshots avec LANG=fr_FR npm test story