0

Bom dia/tarde/noite. Estou desenvolvendo um sistema web e para isso estou utilizando React como framework e para gerenciamento de rotas estou utilizando o React Router. O problema que estou tendo é que: em minha maquina local quando se da um reload na pagina ou se acessa através da URL ele funciona normalmente(carrega a pagina e suas funcionalidades). Porém quando dou deploy utilizando o Firebase e faço a mesma coisa acabo tendo uma pagina em branco.

Alguém poderia me ajudar a solucionar este problema?

Obs.:
Quando dou f12 e vejo o que o servidor retornou para o meu navegador, vejo que ele tem a seguinte estrutura de pastas:

  • NOMEDAROTA(PASTA)

    • nomedarota (arquivo sem extensão, com o HTML do index.HTML)
    • index.bundle.js (conteúdo dele com o HTML do index.html)
    • main.css (conteúdo dele com o HTML do index.html)

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: "./src/index.tsx",
  output: { 
    path: path.join(__dirname, "build"),
    filename: "index.bundle.js" 
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devServer: { 
    contentBase: path.join(__dirname, "src"), 
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
      {
        test: /\.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: ["file-loader"],
      },
      {
        test: /\.html$/,
        use:["html-loader"],
      }
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
    new BundleAnalyzerPlugin()
  ],
};

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

App.tsx

export function App(){
  return (
    <blocContext.Provider value={sessionBlocFactory()}>
      <BrowserRouter>
        <Switch>
          <Route
            exact 
            path='/' 
            render={() => (
              <SignInFactory/>
            )}
          />
          <Route 
            exact 
            path='/precadastro' 
            render={() => (
              <SignUpFactory/>
            )}
          />
          <Route 
            exact 
            path='/novasenha/auth/:action' 
            render={() => (
              <ResetPassword />
            )}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/admin/parceiros'
            render={() => {
              return (<PartnerPage title={"Parceiros"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/admin/produtos'
            render={() => {
              return (<ProductPage title={"Produtos"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/admin/trocas'
            render={() => {
              return (<TradesPage title={"Trocas"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            path='/admin/parceiros/:partnerUid/cupons'
            render={(props) => {
              const aux = props.location.state as any
              const partner = new Partner(
                aux.uid, 
                aux.fantasyName, 
                aux.socialName, 
                aux.cnpj, 
                aux.address, 
                aux.phoneNumber, 
                aux.email, 
                aux.website, 
                aux.socialMedias, 
                aux.proposal, 
                aux.representative, 
                aux.sector, 
                aux.status, 
                aux.user
              );
              return  (<CouponAdminSystemPage title='Cupons' partner={partner}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/admin/relatorios'
            render={() => {
              return (<TradesPage title={"Relatórios"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/parceiro/validar'
            render={() => {
              return (<ValidatePage title={"Validar Cupom"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/parceiro/cupons'
            render={() => {
              return (<CouponPage title={"Cupons"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/parceiro/contrato'
            render={() => {
              return (<ContractPage title={"Contrato"}/>)
            }}
          />
          <ProtectedRoute
            authenticationPath='/'
            exact
            path='/parceiro/relatorios'
            render={() => {
              return (<h1>Tela ainda não criada...</h1>)
            }}
          />
          <Route
            exact
            path='*'
            render={() => {
              return <div>ERROR</div>
            }}
          />
        </Switch>
      </BrowserRouter>
    </blocContext.Provider>
  )
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
  <title>Unimed Cascavel - Clube Cuidar Bem</title>
  <script defer="defer" src="/index.bundle.js"></script>
  <link href="/main.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

comando para gerar o build:

webpack --mode=production --stats-error-details
1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    31/01/2022 às 13:17

1 Resposta 1

1

O problema foi resolvido ao colocar um / na tag script e na do css do index.html gerado pelo webpack.

1
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    31/01/2022 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .