404 Cannot POST React Form after adding webpack

Question

As title implies, I am getting a "404 cannot POST /signup" when I try to submit my form. Also, the data from the form is not begin sent to the onSubmit handler (or the onSubmit handler is not being called, I'm not sure which, since my alert is not showing up). I'm basically just trying to capture the form data and then redirect, but am running into these issues.

When I did onSubmit{alert("test)}, it worked. But when I did onSubmit{(e) => alert(e)} nothing happened and I got the 404 cannot POST. The issues mainly began when I added webpack, so I've included the config file below as well.

I've looked at similar questions, but haven't been able to find a solution to the problem yet, so any help is appreciated, thank you!

Note: I had not originally set method="post" in the form, and when I hadn't, the form data was being formatted like a GET request in the url after refreshing i.e. "localhost:3000/signup?phoneNumber:1231231234"

SignupForm.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { withRouter } from "react-router";
import { useForm, Controller} from "react-hook-form";
import InputMask from "react-input-mask";
import { useHistory } from 'react-dom';


import "../../form_styles.css";

function SignupForm({history}) {

  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors }
  } = useForm();
  
  const onSubmit = (data, e) => {
    alert("Test");
    data.preventDefault();
    console.log(data); 
    history.push("/application");          
  }; // your form submit function which will invoke after successful validation

  console.log(watch("phoneNumber")); // you can watch individual input by pass the name of the input
  
  return (
    <div>
      <form method="post" onSubmit={handleSubmit(onSubmit)}>
        {/* register your input into the hook by invoking the "register" function */}
        <h1>Enter your phone number to begin</h1>
        <label>Click continue and we'll send you a verification code</label>
        {/* <Controller
          control={control}
          mask="000-00-000"
          name="phoneNumber"
          rules={{ required: true }}
          render={({ field: { value, onChange }}) => (
              <InputMask
                mask="(***)***-****" 
                value={value} 
                onChange={onChange} 
                type="tel" 
                placeholder="Phone Number"
              />
          )} 
        /> */}
        <input
                name="phoneNumber"
                placeholder="Phone Number"
              />
        {/* errors will return when field validation fails  */}
        {errors.phoneNumber && <p>This field is required</p>}

        <input type="submit" value="continue"/>
      </form>
    </div>
  );
}

//const rootElement = document.getElementById("root");
//ReactDOM.render(<SignupForm />, rootElement);

export default withRouter(SignupForm);

webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist', 'bundle.js'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, ".", "index.html"),
  }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    open: true,
    clientLogLevel: 'silent',
    port: 9000,
    historyApiFallback: true,
    hot: false//, disableDotRule: true },
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults" 
              }],
              '@babel/preset-react'
            ]
          }
        }]
      },
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      }
    ]
  }
}

404 Cannot POST React Form after adding webpack

0 Answers0