[Dúvida] Problema ao fazer o deploy de um projeto React no Vercel | React

Oi gente, tudo certo?

Estou tentando fazer o deploy de um projeto React.js no Vercel, ele chega a fazer a implementação mas nenhuma página é exibida na tela, é como se o html estivesse vazio. Estou utilizando o "react-router-dom" para cuidar das rotas.

O projeto está aqui no github: https://github.com/Rebel0R/project-Maversati

Esse é o arquivo Routes.jsx:

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/home/Home.jsx";
import Login from "./pages/login/Login.jsx";
import Register from "./pages/register/Register.jsx";
import Shop from "./pages/shop/Shop.jsx";
import CartShop from "./pages/cart-shop/CartShop.jsx";

export default function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Home />} path="/" exact />
        <Route element={<Login />} path="/login" />
        <Route element={<Register />} path="/register" />
        <Route element={<Shop />} path="/shop" />
        <Route element={<CartShop />} path="/cart-shop" />
      </Routes>
    </BrowserRouter>
  );
}

Olá, Ricardo.

Tudo bem?

O erro que você está enfrentando indica um problema com a sintaxe de exportação de módulos em seu código. O erro específico "ES Modules may not assign module.exports or exports.*" sugere que você está usando uma sintaxe de exportação que não é compatível com os módulos ECMAScript (ES modules).

Eu procurei no seu código para ver se tinha essa tal da esportação e achei ela no arquivo "user.js" dentro da pasta "data", o export está da seguinte forma:

module.exports = User;

Eu então alterei para:

export default User;

Ai no arquivo "FormRegister.jsx" estava importando da seguinte forma:

const User = require("../../data/user.js");

Eu alterei para importar assim:

import User from '../../data/user';

Dessa forma tudo funcionou, não sei se pode dar problema por causa do "require", porém funcionou o cadastro, o login, e está adicionando ao carrinho.

Uma curiosidade, no console está reclamando a forma como o render é passado, que na versão nova precisa ser diferente, o seu está assim:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Eu tentei alterar para:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './routes';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Que é uma forma mais atual e funcionou sumindo com o erro do console. Lembrando que isso não estava afetando o funcionamento do código, e sim mostrando um aviso(erro) no console.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Mergulhe em programação