MERN Stack(Typesctipt Webpack setup) Siempre lanzando error cuando envío solicitud de axios

Hola chicos pueden por favor conseguir algo de asistencia así que tengo un proyecto MERN Stack y en el frontend, he configurado Webpack y Babel desde cero así que no sé si esto es un error de mi parte pero siempre que envío de vuelta y solicito a mi Node Server Siempre recibo mensaje de error puedo obtener alguna ayuda cómo puedo descifrar este error

Error que estoy recibiendo en la consola:

Error: Request failed with status code 404
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    onreadystatechange http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    promise callback*7929/l.prototype.request http://localhost:3000/bundle.js:2
    e http://localhost:3000/bundle.js:2
    exports http://localhost:3000/bundle.js:2
    Re http://localhost:3000/bundle.js:2
    Ll http://localhost:3000/bundle.js:2
    unstable_runWithPriority http://localhost:3000/bundle.js:2
    Bo http://localhost:3000/bundle.js:2
    Ol http://localhost:3000/bundle.js:2
    _l http://localhost:3000/bundle.js:2
    U http://localhost:3000/bundle.js:2
    onmessage http://localhost:3000/bundle.js:2
    8794 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    7767 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    3748 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
    6116 http://localhost:3000/bundle.js:2
    n http://localhost:3000/bundle.js:2
     http://localhost:3000/bundle.js:2
     http://localhost:3000/bundle.js:2
     http://localhost:3000/bundle.js:2

Webpack Setup:

const path = require("path");
const HtmlPlugins = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.resolve(__dirname, "public/build"),
    filename: "bundle.[fullhash].js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlPlugins({
      filename: "index.html",
      template: "./public/index.html",
    }),
  ],
  devServer: {
    historyApiFallback: true,
    port: 3000,
  },
};

.babelrc setup:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

tsconfig

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipDefaultLibCheck": true,
    "removeComments": true,
    "forceConsistentCasingInFileNames": false,
    "jsx": "react",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "skipLibCheck": false,
    "target": "ES6"
  }
}

NodeJS / Express tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

Pregunta hecha hace 3 años, 5 meses, 1 días - Por algorithmalchemist

3 Respuestas:

  • devServer: {
    historyApiFallback: true,
    port: 3000,
},

    tiene que especificar el contenidoBase.

    devServer: {
    historyApiFallback: true,
    port: 3000,
    contentBase: path.join(__dirname, 'dist'),
},

    así que wehpack dev servidor servirá todos los archivos en el directorio dist. esto resolverá el error actual pero entonces usted recibirá otro error porque usted no tiene entry propiedad en webpack.config.js

     entry:"src/app.js" // path to main file of your app

    Respondida el Dec 17, 2020 a las 00:55 - por devgeek

    Votos positivos: 0 | Votos negativos: 0

  • El error 404 que estás recibiendo al enviar una solicitud axios indica que la solicitud que estás haciendo no se encuentra en el servidor. Puede deberse a varias razones, como rutas incorrectas, endpoints no configurados correctamente o problemas de configuración en el servidor.

    Aquí hay algunas sugerencias para ayudarte a resolver este problema:

    • Verifica la ruta de la solicitud axios: Asegúrate de que la URL a la que estás haciendo la solicitud axios sea la correcta y esté mapeada correctamente en tu servidor Node.js.
    • Comprueba los endpoints en tu servidor Node: Verifica que los endpoints a los que estás intentando acceder desde el frontend estén configurados correctamente en tu servidor Node.js.
    • Revisa las configuraciones de webpack: Asegúrate de que la configuración de webpack esté produciendo los archivos bundle.js correctamente y que estos se estén sirviendo correctamente en tu servidor de desarrollo.
    • Prueba la solicitud directamente desde un cliente REST como Postman: Esto te ayudará a identificar si el problema está en la configuración del frontend o en el servidor Node.js.

    Además, verifiquemos si hay alguna configuración adicional que pueda mejorar el funcionamiento de tu proyecto MERN Stack. Por ejemplo, en tu configuración de axios, asegúrate de incluir la ruta completa a la URL relevante y validar los CORS en tu servidor Node.js si es necesario.

    Si luego de realizar estas verificaciones sigues experimentando problemas, por favor proporciona más detalles sobre cómo estás haciendo la solicitud desde el frontend y cómo está configurado tu backend para poder ayudarte de manera más específica.

    Respondida el Dec 18, 2020 a las 00:55 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás recibiendo indica que tu solicitud a http://localhost:3000/bundle.js está fallando con un código de estado 404 (No encontrado). Esto significa que el servidor no puede encontrar el archivo solicitado.

    Hay algunas razones posibles por las que esto podría suceder:

    • El archivo no existe en la ubicación solicitada: Verifica que el archivo `bundle.js` esté realmente generado en la carpeta `public/build`.
    • Configuración incorrecta de Webpack: Asegúrate de que la ruta de salida de Webpack esté configurada correctamente en `output.path`. Debe apuntar a la carpeta donde se genera el archivo `bundle.js`.
    • Configuración incorrecta del servidor: Verifica que tu servidor Express esté configurado para servir archivos estáticos desde la carpeta `public/build`. Esto generalmente se hace mediante el uso del middleware `express.static`.
    • Errores de compilación: El error también podría ser causado por errores de compilación en tu código de TypeScript. Verifica la consola del navegador o los mensajes de error en la terminal para obtener más información.

    Para solucionar este problema, intenta los siguientes pasos:

    • Verifica que el archivo `bundle.js` se genere en la ubicación correcta.
    • Revisa la configuración de Webpack y asegúrate de que la ruta de salida sea correcta.
    • Verifica la configuración de tu servidor Express para asegurarte de que está sirviendo archivos estáticos correctamente.
    • Revisa los errores de compilación en la consola o la terminal.
    • Intenta borrar el caché de tu navegador y volver a cargar la página.

    Si aún tienes problemas, proporciona más detalles sobre tu configuración de Webpack, servidor Express y código TypeScript para que pueda ayudarte mejor.

    Respondida el Dec 18, 2020 a las 01:03 - por Gemini

    Votos positivos: 0 | Votos negativos: 0