Perguntas[reactjs](coding)

Estou apenas começando a usar o React, então, tenham paciência comigo.

Tenho um componente React pai, Usuários, que contém outro componente React como este:

<UsersTable onSelectRecord={onSelectRecord} />

'onSelectRecord' é uma função definida em Usuários.

UseraTable é definido como:

const UsersTable = props => {...}

e seu gancho useEffect é implementado como:

useEffect(() => {
       fetchUsers(1);
}, [props.updateTime]);

O que entendi disso é que o hook useEffect é executado sempre que a propriedade updateTime é alterada.

Mas em Usuários, não vejo nenhuma propriedade desse tipo sendo passada.

Então como isso funciona?

Estou criando um cursor personalizado anexando dinamicamente um elemento div no hook useEffect quando o componente é montado e é definido para seguir o mouse usando ouvintes de eventos. No entanto, dois divs estão sendo renderizados — um segue corretamente o mouse, enquanto o outro fica no canto superior esquerdo da viewport.

import { useRef, useEffect, useState } from "react"

function Pcanvas({width, height, pixelSize}){
    const [canvasColor, setCanvasColor] = useState("#dcdcdc")
    const [pencilSize, setPencilSize] = useState(pixelSize)
    const canvasRef = useRef(null)
    var mousePressed = false

    function mouseCursor(){
        const cursor = document.createElement("div")
        cursor.className = 'cursor'
        cursor.style.backgroundColor = 'black'
        cursor.style.width = pencilSize + 'px'
        cursor.style.height = pencilSize + 'px'
        cursor.style.position = 'absolute';
        cursor.style.display = 'block';
        cursor.style.zIndex = 999;
        cursor.style.pointerEvents = 'none';
        document.body.appendChild(cursor)
        
        console.log(cursor.getBoundingClientRect().y)
    }
    
    function handleMouseMov(event){
        const cursor = document.getElementsByClassName('cursor')[0]
        console.log(cursor.getBoundingClientRect().y)
        if(cursor){
            cursor.style.top = event.clientY-(pencilSize/2) + 'px'
            cursor.style.left = event.clientX-(pencilSize/2) + 'px'
        }
    }

    function handleMouseLeave(event){
        const cursor = document.getElementsByClassName('cursor')[0]
        if(cursor){
            cursor.style.display = 'none'
        }
    }
    
    function handleMouseEnter(event){
        const cursor = document.getElementsByClassName('cursor')[0]
        if(cursor){
            cursor.style.display = 'block'
        }
    }
    
    useEffect(() => {
        const canvas = canvasRef.current 
        mouseCursor()
        document.body.addEventListener('mouseenter', handleMouseEnter)
        document.body.addEventListener('mousemove', handleMouseMov)
        document.body.addEventListener('mouseleave', handleMouseLeave)

        return(() => {
            document.body.removeEventListener('mouseenter', handleMouseEnter)
            document.body.removeEventListener('mousemove', handleMouseMov)
            document.body.removeEventListener('mouseleave', handleMouseLeave)
        })
    }, [pencilSize])

    return(
        <></>
    )
}

export default Pcanvas

Estou enfrentando um erro "Profundidade máxima de atualização excedida" no meu aplicativo React Native. O problema ocorre quando descomento o componente DropDownPicker no meu componente CropsGraph. Aqui está o fluxo do meu aplicativo:

Eu busco graphData em DataAnalysis.js e o passo como um prop para CropsGraph.js.

No CropsGraph.js, eu processo o graphData para gerar dados para gráficos e os passo para o ChartScreen.js.

Eu uso useEffect em CropsGraph.js para processar os dados sempre que graphData ou selectedCrop mudam.

Aqui está o código relevante para CropsGraph.js:

import React, { useEffect, useState, useCallback } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import ChartScreen from './ChartScreen';
import DropDownPicker from 'react-native-dropdown-picker';
import { transformData, processBarData } from '../../../config/HelperFunction/index';

export const CropsGraph = ({ graphData }) => {
  const [graphState, setGraphState] = useState({
    data: null,
    years: [],
    feedback: '',
    graphs: [],
  });
  const [cropOpen, setCropOpen] = useState(false);
  const [selectedCrop, setSelectedCrop] = useState(3);
  const colors = ['#FFA500', '#2e8b57', '#9F2B68'];

  const processGraphData = useCallback((key, firstYearData, secondYearData, thirdYearData) => {
    const keyUnits = {
      COST: '(RS.)',
      CULTIVATED_AREA: '(ACRE)',
      YIELD: '(MOUND/ACRE)',
      TOTAL_PRODUCTION: '(MOUND)',
      CASHFLOW: '(RS.)',
      RATE: '(RS.)',
    };
    const result = processBarData(key, firstYearData, secondYearData, thirdYearData, colors);
    const unit = keyUnits[key] || '';
    return {
      data: result.data,
      max: result.maxValue,
      sections: result.numberOfSections,
      title: `${key.replace(/_/g, ' ')} ${unit}`,
    };
  }, []);

  const updateGraphState = useCallback(() => {
    if (graphData && Object.keys(graphData).length > 0) {
      const keys = Object.keys(graphData);
      const years = keys;

      let firstYearData = graphData[keys[0]]?.[selectedCrop]
        ? transformData(graphData[keys[0]][selectedCrop])
        : null;

      let secondYearData = graphData[keys[1]]?.[selectedCrop]
        ? transformData(graphData[keys[1]][selectedCrop])
        : null;

      let thirdYearData = graphData[keys[2]]?.[selectedCrop]
        ? transformData(graphData[keys[2]][selectedCrop])
        : null;

      const feedback =
        thirdYearData?.FEEDBACK || secondYearData?.FEEDBACK || firstYearData?.FEEDBACK || '';

      const graphKeys = [
        'COST',
        'CULTIVATED_AREA',
        'RATE',
        'YIELD',
        'TOTAL_PRODUCTION',
        'CASHFLOW',
      ];

      const graphs = graphKeys.map((key) =>
        processGraphData(key, firstYearData, secondYearData, thirdYearData)
      );

      setGraphState({ data: graphData, years, feedback, graphs });
    } else {
      setGraphState({ data: null, years: [], feedback: '', graphs: [] });
    }
  }, [graphData, selectedCrop, processGraphData]);

  useEffect(() => {
    updateGraphState();
  }, [graphData, selectedCrop, updateGraphState]);

  return (
    <View style={styles.safeAreaStyle}>
      <ScrollView>
        <DropDownPicker
          placeholder="Select Crop"
          open={cropOpen}
          value={selectedCrop}
          setOpen={setCropOpen}
          setValue={setSelectedCrop}
        />
        {graphState.graphs.map((graph, index) =>
          graph.data.length > 0 ? (
            <View key={index} style={styles.chartContainer}>
              <Text style={styles.chartTitle}>{graph.title}</Text>
              <ChartScreen
                barData={graph.data}
                numberOfSections={graph.sections}
                max={graph.max}
                years={graphState.years}
                feedback={graphState.feedback}
              />
            </View>
          ) : (
            <View key={index} style={styles.emptyContainer}>
              <Text>No Data Available for {graph.title}</Text>
            </View>
          )
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  safeAreaStyle: { flex: 1, backgroundColor: 'white' },
  chartContainer: { marginVertical: 15 },
  chartTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 5, textAlign: 'center' },
  emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
});

Se eu comentar o DropDownPicker, o componente funciona bem, sem erros.

Quando descomento o DropDownPicker, recebo o erro "Profundidade máxima de atualização excedida".

O console mostra que useEffect é executado repetidamente, mesmo que dependências como graphData e selectedCrop sejam estáveis.

Como posso corrigir o problema de loop infinito causado pelo DropDownPicker e garantir que meu useEffect seja executado somente quando necessário? Existe uma maneira melhor de lidar com esse tipo de processamento de dados dependente de estado no React Native?

Tenho dois estados, um tem categorias e o outro tem itens.

tudo o que preciso é de um estado final que combine os dois estados, seja fundindo um no outro ou criando um terceiro estado.

o estado das categorias se parece com isto:

{
category1: { items: [] },
category2: { items: [] }
}

e o segundo estado é uma matriz de itens e se parece com isto:

[
{"id": "1", itemInfo: { name: "itemName", category: "category1" }},
{"id": "2", itemInfo: { name: "itemName", category: "category1" }},
{"id": "3", itemInfo: { name: "itemName", category: "category2" }},
{"id": "4", itemInfo: { name: "itemName", category: "category1" }},
{"id": "5", itemInfo: { name: "itemName", category: "category2" }},
{"id": "6", itemInfo: { name: "itemName", category: "category2" }}
]

preciso que seja assim:

{
category1: { items: [
    {"id": "1", itemInfo: { name: "itemName", category: "category1" }},
    {"id": "2", itemInfo: { name: "itemName", category: "category1" }},
    {"id": "4", itemInfo: { name: "itemName", category: "category1" }}
]},

category2: { items: [
    {"id": "3", itemInfo: { name: "itemName", category: "category2" }},
    {"id": "5", itemInfo: { name: "itemName", category: "category2" }},
    {"id": "6", itemInfo: { name: "itemName", category: "category2" }}
]}
}

ajuda. por favor.

foi isso que tentei e não funcionou, ou duplica as categorias e acabo com 3 "categoria1" e 3 "categoria2" ou os novos itens substituem os itens anteriores.

const newFinalList = items.map((item: any) => {
    return {[item.itemInfo.category]: {items: [item]}}
}) 

setFinalState((prevObj: any) => ({ ...prevObj, ...newFinalList }))

Dado o seguinte código:

someArray.map(item => 
    <>
        <p>{item.Name}</p>
        <p>{item.Value}</p>
    </>

Como e onde devo definir a propriedade key para que o React não reclame?

Uma reviravolta na história: não posso substituir <></>por eg <span>ou <div>, porque isso quebraria o layout.

Em um aplicativo web (NextJS/React), estou usando react-tabs para manipular guias.

Gostaria de saber como manter os cabeçalhos das abas fixos. Isso está impedindo que eles rolem para cima e desapareçam quando eu rolar para cima o conteúdo da página.

Depois de pesquisar na internet, tentei usar react-sticky, mas parece que não funciona.

Eu até tenho a impressão de que react-tabs e react-sticky não devem funcionar juntos. Diga-me se estou errado.

Aqui está o código atual relevante:

import { Tabs,TabList,Tab,TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
.....

return (
  <Tabs defaultIndex={tabInit()}>
    <TabList>
      <Tab>Title-One</Tab>
      <Tab>Title-Two</Tab>
      <Tab>Title-Three</Tab>
      <Tab>Title-Four</Tab>
      <Tab>Title-Five</Tab>
      <Tab>Title-Six</Tab>
    </TabList>
    <TabPanel><Contents-One/></TabPanel>
    <TabPanel><Contents-Two/></TabPanel>
    <TabPanel><Contents-Three/></TabPanel>
    <TabPanel><Contents-Four/></TabPanel>
    <TabPanel><Contents-Five/></TabPanel>
    <TabPanel><Contents-Six/></TabPanel>
  </Tabs>
)

Como posso obter o efeito que preciso ao usar react-tabs?

Eu tenho um roteador assim

import { createRoot } from 'react-dom/client';
// react-router v7
import { createHashRouter, Link, Outlet, RouterProvider } from 'react-router';

const root = document.createElement('div');
root.setAttribute('id', 'app');
document.body.appendChild(root);

const router = createHashRouter([
  {
    path: 'homepage',
    element: (
      <div>
        <Link to="workspace/1">To workspace 1</Link>
        <br />
        <Link to="foo">To foo</Link>
        <main>
          <Outlet />
        </main>
      </div>
    ),
    children: [
      {
        path: 'workspace/:spaceId/*',
        // I want to lazy load this route, so I use <Routes> to define its sub routes
        element: (
          <div>
            <Link to="setting">To space setting</Link>
            <Routes>
              <Route path="setting" />
            </Routes>
          </div>
        ),
      },
      {
        path: 'foo',
        element: <div>foo</div>,
      },
    ],
  },
]);
createRoot(root).render(
  <RouterProvider router={router} />,
);

A <Link>página inicial funciona bem. Mas quando clico no link 'Para configuração de espaço' várias vezes, o caminho se torna /homepage/workspace/1/setting/setting/setting....

Não quero escrever o caminho absoluto no link, por exemplo. <Link to="/homepage/workspace/${spaceId}/setting" />Existe uma maneira melhor de resolver esse problema?

Eu tentei:

• Defina sub-rotas createHashRouterpara remover splat, <Link>funciona bem. Mas não é isso que eu quero.
• Obtenha o caminho atual da rota para que eu possa usar <Link to={`${currentPath}/setting`} />, mas não encontrei uma API para fazer isso em react-router.

Estou trabalhando em um componente que funciona com a loja MobX e me deparei com um problema. Quando vou para uma página com um id de item diferente, depois de carregar os dados, vejo os dados anteriores antes que o novo seja renderizado. Então, escrevi esta verificação para a primeira renderização, que parece funcionar bem para preparar o componente para renderizar, mas me parece que pode ser um código ruim. É assim?

"use client"

const Component = (props) => {
   const isFirstRender = useRef(true)

   if (isFirstRender.current) {
      /* some action */
      isFirstRender.current = false
   }

   return (
      /* some jsx */
   )
})

Estou tentando escrever um diálogo de formulário reutilizável em TypeScript e MaterialUI. Quero poder passar como prop para o diálogo um array de componentes Form que o diálogo renderizará. Dentro do diálogo, um índice de estado rastreará o formulário atual e o renderizará. Mas não consigo fazê-lo funcionar. Aqui está o código que tenho até agora:

interface CustomFormProps {
  hasNext: boolean,
  hasPrev: boolean,
  hasSubmit: boolean
}

const FormOne:React.ComponentType<CustomFormProps> = ({hasNext= true, hasPrev= true, hasSubmit= true}) => {
  return (
    <Box>
      <Typography>
        {hasNext ? "NEXT" : ""}
        {hasPrev ? "PREV" : ""}
        {hasSubmit ? "SUBMIT" : ""}
      </Typography>
    </Box>
  )
}

interface FormDialogProps {
    toggleDialog: () => void | undefined,
    isOpen: boolean,
    headerText: string,
    stepLabels: Array<string>,
    steps: React.ComponentType<CustomFormProps>[]
}

const FormDialog = (props: FormDialogProps) => {
    const theme = useTheme();
    const [currentForm, setCurrentForm] = useState(0);

    const next = () => {

    }

    const previous = () => {

    }

    const submit = () => {

    }

    const Current:React.ComponentType<CustomFormProps> = props.steps[currentForm];
    return (
        <Dialog onClose={props.toggleDialog} open={props.isOpen} fullWidth maxWidth="md">
            <DialogTitle sx={{ borderBottom: `1px solid ${theme.colors.gold.neutral}`, backgroundColor: theme.colors.gold.neutral, padding: "20px" }}>
                <strong>{props.headerText}</strong>
            </DialogTitle>
            <DialogContent sx={{ marginTop: "12px", display: "flex", flexDirection: "column" }}>
                <Current />
            </DialogContent>
            <DialogActions sx={{ borderTop: `1px solid ${theme.colors.gold.neutral}`, backgroundColor: theme.colors.gold.neutral, padding: "20px" }}>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Previous</Button>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Next</Button>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Submit</Button>
            </DialogActions>
        </Dialog>
    );
};

O problema que estou tendo é no componente FormDialog onde tento renderizar o filho atual. O TypeScript está dizendo que não forneci os props necessários, mas acho que esses props existem onde defino o FormOne. Se eu tiver que redefinir os props dentro do FormDialog, isso meio que anula completamente o propósito de poder passar componentes para o diálogo que gerenciam seus próprios props. Existe uma maneira de contornar isso?

o problema acontece quando tento executar o script de teste e a especificação pré-existente do playwright está falhando. Atualizei alguns pacotes recentemente devido à migração de webpackpara rspack, isso inclui jest@29, eslint@9.

O Playwright foi adicionado recentemente ao repositório pelo meu colega de trabalho e os testes estão funcionando bem do lado dele. Imagino que possa haver algum problema de dependência de pares internamente no playwright que seja uma causa, mas tenho batido a cabeça na parede o dia todo e não consigo descobrir qual é o culpado.

Log de erros completo:

TypeError: ys.deprecate is not a function

    > 1 | import { test, expect } from '@playwright/test';
        | ^
      2 | import { login } from './utils/helpers';
      3 |
      4 | test.describe('Login happy paths', () => {

      at node_modules/playwright-core/lib/utilsBundleImpl/index.js:2:9075
      at node_modules/playwright-core/lib/utilsBundleImpl/index.js:1:324
      at node_modules/playwright-core/lib/utilsBundleImpl/index.js:6:268
      at node_modules/playwright-core/lib/utilsBundleImpl/index.js:1:324
      at Object.<anonymous> (node_modules/playwright-core/lib/utilsBundleImpl/index.js:182:14404)
      at Object.<anonymous> (node_modules/playwright-core/lib/utilsBundle.js:30:33)
      at Object.<anonymous> (node_modules/playwright-core/lib/server/registry/index.js:22:20)
      at Object.<anonymous> (node_modules/playwright-core/lib/server/index.js:102:17)
      at Object.<anonymous> (node_modules/playwright-core/lib/inProcessFactory.js:7:15)
      at Object.<anonymous> (node_modules/playwright-core/lib/inprocess.js:3:25)
      at Object.<anonymous> (node_modules/playwright-core/index.js:33:18)
      at Object.<anonymous> (node_modules/playwright/lib/index.js:34:49)
      at Object.<anonymous> (node_modules/playwright/test.js:17:13)
      at Object.<anonymous> (node_modules/@playwright/test/index.js:17:18)
      at Object.require (tests/auth.spec.ts:1:1)

Também erro secundário que ocorre jestapós a atualização:

Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'isNativeError')

      at failureDetailsToErrorOrStack (node_modules/jest-message-util/build/index.js:426:17)
          at Array.map (<anonymous>)

não há nenhuma outra saída deste teste em particular e o arquivo não faz referência a isNativeErrorlugar nenhum. Isso deve ser algo interno do jest.

Tentei fazer o downgrade para 28 e 27, mas sem sucesso.

EDITAR:

auth.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Login happy paths', () => {
  test('has title', async ({ page }) => {
    await page.goto('/');
    await expect(page.getByRole('heading', { name: 'Login' })).toBeVisible();
  });
});

package.json

{
  "name": "<PROJECT_NAME",
  "version": "2.3.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-dev": "webpack   --config config/webpack/webpack.dev.js --progress",
    "build-local": "webpack  --config config/webpack/webpack.local.js  --progress",
    "build-uat": "webpack   --config config/webpack/webpack.uat.js --progress",
    "build-prod": "webpack  --config config/webpack/webpack.prod.js --progress",
    "start": "webpack serve --hot --config config/webpack/webpack.local.js --open",
    "rspstart": "rspack serve --hot --config config/rspack/rspack.local.js",
    "eslint": "eslint \"src/**/*.{js,ts,tsx}\"",
    "eslint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
    "test": "cross-env TZ=UTC jest",
    "test:watch": "cross-env TZ=UTC jest --watchAll",
    "test:coverage": "cross-env TZ=UTC jest --coverage",
    "test:debug": "cross-env TZ=UTC jest --detectOpenHandles",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "typecheck": "tsc",
    "playwright": "npx playwright test",
    "playwright:ui": "npx playwright test --ui port 0",
    "playwright:report": "npx playwright show-report"
  },
  "author": "",
  "license": "",
  "engines": {
    "node": ">=14",
    "npm": ">=7"
  },
  "overrides": {
    "@jest/create-cache-key-function": "<=27.5.1",
    "react-native": "^0.70.6"
  },
  "dependencies": {
    "@floating-ui/react": "^0.27.2",
    "@playwright/test": "^1.49.1",
    "@reduxjs/toolkit": "^1.9.7",
    "@types/highcharts": "^7.0.0",
    "aws-amplify": "^6.11.0",
    "axios": "^1.7.9",
    "classnames": "^2.5.1",
    "date-fns": "2.23.0",
    "file-saver": "2.0.5",
    "git-rev-sync": "^3.0.2",
    "highcharts": "^11.2.0",
    "highcharts-react-official": "^3.2.1",
    "ip": "1.1.5",
    "lodash": "^4.17.21",
    "lodash.debounce": "^4.0.8",
    "polished": "^4.3.1",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.1",
    "react-color": "2.19.3",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.54.2",
    "react-icons": "^4.10.1",
    "react-loading-skeleton": "^3.5.0",
    "react-markdown": "^8.0.7",
    "react-quill": "^2.0.0",
    "react-redux": "7.2.5",
    "react-rnd": "^10.4.14",
    "react-router-dom": "5.3.0",
    "react-select": "^5.9.0",
    "react-switch": "^7.1.0",
    "react-tooltip": "4.2.21",
    "react-transition-group": "^4.4.5",
    "react-virtualized-auto-sizer": "^1.0.25",
    "react-window": "^1.8.11",
    "react-window-infinite-loader": "^1.0.9",
    "redux": "4.1.1",
    "redux-thunk": "2.3.0",
    "styled-components": "5.3.1",
    "styled-theming": "2.2.0",
    "typescript": "^5.7.2",
    "uuid": "8.3.2",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/eslint-parser": "7.15.4",
    "@babel/node": "7.15.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
    "@babel/plugin-proposal-optional-chaining": "7.14.5",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/plugin-transform-runtime": "7.15.0",
    "@babel/preset-env": "7.15.4",
    "@babel/preset-react": "7.14.5",
    "@babel/preset-typescript": "^7.16.0",
    "@babel/runtime": "^7.3.1",
    "@rspack/cli": "^1.1.8",
    "@rspack/core": "^1.1.8",
    "@rspack/plugin-react-refresh": "^1.0.1",
    "@storybook/addon-actions": "^7.6.20",
    "@storybook/addon-essentials": "^7.6.20",
    "@storybook/addon-links": "^7.6.20",
    "@storybook/react": "^7.6.20",
    "@storybook/react-webpack5": "^7.6.20",
    "@svgr/webpack": "^8.1.0",
    "@swc/core": "^1.10.4",
    "@swc/plugin-styled-components": "^5.0.2",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "12.0.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/file-saver": "^2.0.7",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/jest": "^29.5.14",
    "@types/lodash.debounce": "^4.0.9",
    "@types/node": "^16.18.122",
    "@types/react": "^17.0.83",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-color": "^3.0.13",
    "@types/react-dom": "^18.0.3",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-select": "^5.0.1",
    "@types/react-transition-group": "^4.4.12",
    "@types/react-virtualized-auto-sizer": "^1.0.4",
    "@types/react-window": "^1.8.8",
    "@types/react-window-infinite-loader": "^1.0.9",
    "@types/redux-mock-store": "^1.5.0",
    "@types/styled-components": "^5.1.25",
    "@types/styled-theming": "^2.2.8",
    "@types/uuid": "^9.0.8",
    "@types/webfontloader": "^1.6.38",
    "@types/webpack": "^4.41.31",
    "@types/webpack-dev-server": "^4.7.2",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "@typescript-eslint/parser": "^8.19.0",
    "@webpack-cli/serve": "1.5.2",
    "as-a": "^2.2.7",
    "autoprefixer": "10.3.4",
    "babel-jest": "27.1.0",
    "babel-loader": "8.2.2",
    "babel-plugin-istanbul": "6.0.0",
    "babel-plugin-styled-components": "1.13.2",
    "clean-webpack-plugin": "4.0.0",
    "copy-webpack-plugin": "9.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "6.2.0",
    "css-minimizer-webpack-plugin": "3.0.2",
    "dotenv-webpack": "^7.0.3",
    "eslint": "9.17",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jest": "28.9",
    "eslint-plugin-react": "^7.37.3",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-storybook": "^0.11.2",
    "eslint-rspack-plugin": "^4.2.1",
    "eslint-webpack-plugin": "^4.2.0",
    "file-loader": "6.2.0",
    "fork-ts-checker-webpack-plugin": "^9.0.2",
    "globals": "^15.14.0",
    "html-webpack-plugin": "5.3.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-styled-components": "7.0.5",
    "jsdom": "^25.0.1",
    "mini-css-extract-plugin": "2.2.2",
    "nyc": "15.1.0",
    "postcss": "^8.4.49",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.1.2",
    "prettier": "2.3.2",
    "react-select-event": "^5.5.1",
    "react-test-renderer": "17.0.2",
    "redux-devtools-extension": "2.13.9",
    "redux-mock-store": "^1.5.5",
    "storybook": "^7.6.8",
    "style-loader": "3.2.1",
    "terser-webpack-plugin": "5.2.3",
    "ts-checker-rspack-plugin": "^1.1.0",
    "ts-loader": "^9.5.1",
    "ts-node": "^10.9.2",
    "url-loader": "4.1.1",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "5.8.0"
  }
}

A execução rspstartfunciona bem. Apenas o testor test:watchfalha no E2E - somente após a migração.

Ao atualizar pacotes, alguns tiveram problemas de dependência de pares, mas estes estavam puramente relacionados a webpack- eslinteu executo alguns deles com --legacy-peer-depso sinalizador para poder desinstalar plugins webpack redundantes.

Além disso, reconstruir package-lock.jsoncom uma instalação limpa quebra muito mais coisas. Talvez essas coisas devam ser resolvidas primeiro?