0

Estoy intentando renderizar dos reactDom en dos archivos HTML distintos (respectivamente). Utilizando webpack.

Archivos Html

dentro esta:

[app.html]

  <body>
   <div id="root"></div>
   <script src="../../build/js/index.js"></script>
</body>

[setup.html]

  <body>
    <div id="setup-root"></div>
    <script src="../../build/js/setup.js"></script>
  </body>

En dos archivos distintos intento renderizarlos

[index.js]

import React from "react";
import ReactDOM from "react-dom";
import App from "../views/App";
ReactDOM.render(<App />, document.getElementById("root"));

[setup.js]

import React from "react";
import ReactDOM from "react-dom";
import Setup from "../views/Setup";
ReactDOM.render(<Setup />, document.getElementById("setup-root"));

He separado los ReactDOM.render en archivos distintos, el index.js se encarga de renderizar el index.html, el cual es la pagina principal, y el setup.js el otro archivo. Y necesito hacerlo en 2 html distintos.

Este es mi archivo de configuración de webpack (no se si el problema este ahí)

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    index: "./dist/react/index.js",
    setup: "./dist/react/setup.index.js",
  },
  devtool: "inline-source-map",
  target: "electron-renderer",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    esmodules: true,
                  },
                },
              ],
              "@babel/preset-react",
            ],
            plugins: [
              [
                "@babel/plugin-proposal-class-properties",
                {
                  loose: true,
                },
              ],
            ],
          },
        },
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js"],
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build", "js"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2,
        },
      },
    },
  },
};

Pero sale todo en blanco, no hay un error ni nada, y ya revise que el HTML esta leyendo los Js correctamente. Posdata: "Estoy corriendo React dentro de Electron"

Imagen del error

1 respuesta 1

0

ReactJs no soporta multiples html es para hacer single page aplication. Usa solo un index.html donde renderizara todo. Puedes usar react-router para manejar las rutas y renderizar dependiendo la ruta, por ejemplo la parte /admin renderizas un componente admin. Con wepback creo que puedes crear que carge otro html en tal ruta pero tienes que crear otra applicacion de react tener 2 aplicaciones creo que asi se podria ya que react usa solo un index.html y nada mas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.