EXP-520 - Bump to Webpack v5

[vagrantsn]

Contexto

A fim de validarmos o uso de Microfrontend com a Pilot, precisamos fazer o upgrade para a versão 5 do Webpack, que possui suporte para Module Federation.

Esta nova versão introduziu muitas breaking changes que precisamos ajustar, e também houveram diversos plugins que precisaram ser atualizados para funcionar da maneira esperada.

Guia para migração do Webpack V4 para o V5: https://webpack.js.org/migrate/5/

Patches

Alguns plugins ainda não foram atualizados para funcionar com a nova versão do Webpack 5 e começaram a quebrar. Com isto precisamos fazer uso do patch-package para modificar a node_modules diretamente, o que deve ser algo temporário até que os fixes sejam feitos nas packages:

• sw-precache-webpack-plugin
• react-dev-utils

Como testar

Com create-react-app

Utilize o --scripts-version para criar uma aplicação com CRA com o nosso react-scripts:

npx create-react-app --scripts-version file:./react-scripts-former-kit-dashboard my-app

Criada a aplicação, entre nela e aplique os patches na node_modules:

yarn patch-package --patch-dir=./node_modules/react-scripts-former-kit-dashboard/patches

Criada a aplicação, execute nela as operações:

• [ ] yarn test e verifque se os testes passam
• [ ] yarn start e verifique se o app está funcionando corretamente, sem erros de lint
• [ ] yarn build && npx serve build e verifique se a build está funcionando corretamente

Com a pilot

Gere uma package do nosso react-scripts (atente-se que o npm pack faz caching das packages, se o conteúdo do .tgz não corresponder com o da pasta, altere o "version" no package.json para algum outro valor):

npm pack

Na pilot, com a branch feat/webpack-bump, entre na package Pilot e faça o apontamento com o react-scripts:

diff --git a/packages/pilot/package.json b/packages/pilot/package.json
index e6e3218c..c6868031 100644
--- a/packages/pilot/package.json
+++ b/packages/pilot/package.json
@@ -32,7 +32,7 @@
     "react-motion": "0.5.2",
     "react-redux": "6.0.0",
     "react-router-dom": "5.1.2",
-    "react-scripts-former-kit-dashboard": "2.3.0",
+    "react-scripts-former-kit-dashboard": "<caminho absoluto para o .tgz que foi gerado pelo comando npm pack>",
     "react-select": "3.0.4",
     "react-vanilla-form": "0.6.1",
     "recharts": "1.6.2",

Na raíz do monorepo, instale as dependencias:

cd pilot && yarn

Agora execute na Pilot as operações:

• [ ] yarn test e verifque se os testes passam
• [ ] yarn start e verifique se o app está funcionando corretamente, sem erros de lint
• [ ] yarn storybook e verifique se as stories estão funcionando corretamente
• [ ] yarn build && npx serve build e verifique se a build está funcionando corretamente

[diegodsgarcia]

Eu tentei aqui também só que instalando pelo npm e o caminho ficou assim: "react-scripts-former-kit-dashboard": "file:react-scripts-former-kit-dashboard-2.3.0.tgz"

Porém ao rodar aqui o yarn start, quebrou no próprio terminal o postcss :eyes:

[diegodsgarcia]

Eu fiz aqui o processo porém deu um erro de lint em um componente: