1

Empecé a usar react-router-dom, es una dependencia muy buena. Pero he tenido el siguiente caso: Al correr la aplicación en modo desarrollo (también me pasa cuando genero el build) y navegar entre mis rutas no tengo ningún problema, sin embargo, al refrescar (F5) todo el contenido desaparece y el navegador informa Cannot GET / {ruta}. Estoy 100% que es mi configuración de webpack, porque al correrlo con react-scripts no tengo este problema. Si alguien me puede ayudar estaría muy agradecido.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.[hash].js',
    chunkFilename: '[id].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(css|scss)$/,
        use:
          [
            {
              loader: 'style-loader' // inject CSS to page
            },
            {
              loader: 'css-loader', // translates CSS into CommonJS modules
              options:
              {
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader' // Run postcss actions
            },
            {
              loader: 'sass-loader', // compiles Sass to CSS
              options: {
                sourceMap: true
              }
            }
          ],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=10000&name=img/[name].[ext]',
        exclude: /node_modules/
      },
      {
        test: /\.ico$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: (__dirname + '/public/index.html'),
      filename: 'index.html',
      inject: 'body'
    })
  ]
}

1 respuesta 1

0

es porque necesitas crear un middleware que entregue en un endpoint al servidor, si lo haces solo con el comando de build no tendrás un endpoint, solo se establecerá conexión esa única vez. aquí alguien tenia el mismo problema que tu y le respondieron con un ejemplo de como levantar un server usando un middleware con express.

https://stackoverflow.com/questions/41796030/webpack-hot-reaload-react

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.