reactjs – React form not storing results or redirecting as intended after adding webpack to project

I currently have a form that takes in an input of a phone number as text. I am trying to gather/log the data to the console and also redirect (with history.push()) when the form is submitted and have run into the following situation:

Everything worked fine (logging submitted form data and redirecting) before I decided to use webpack (was still a small project so didn’t think it would take much), and now for some reason, presumably webpack but I also could have goofed something else, a few things are happening:

Note:
I am using react-hook-form, but have found the same issues with the regular as well. I’ve spent quite a bit of time meddling with different things and researching online and haven’t really found an answer to why this is happening now with webpack.

  1. The form, onSubmit, always appends “?input1:valueinput2:value” for the form data to the current url, and I have no idea what is causing this. Even after commenting out history.push() and console.log(data) this is happening.
    Ex. after submit, the resulting url would be http://localhost:9000/signup?phoneNumber=1231231234
  2. The form does not redirect, and instead just refreshes with the url as described above
  3. Less concerning but still thought to note: Input mask (react-input-mask) no longer does any masking for the input box in SignupForm.js. Also, when input mask is used in controller (currently commented out and replaced with ), problem 1 & 2 occurs but without the form value as url parameters, it just appends the ? to the url after refreshing, i.e. => http://localhost:9000/signup?

I’m stumped as to what the issue might be, but figure I am misunderstanding something with how I have designed my project.

I am running the project with the npm start script, as shown in package.json and have included all the relevant files below. I appreciate any help I can get here, thank you!

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  BrowserRouter as Router,
} from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js:

import React from 'react';
import { Component } from 'react';
import SignupForm from './_components/SignupForm';
import {
  Switch, 
  Route
} from "react-router-dom";

export default class App extends Component {
  render() {
    return (
        <div className="App">
          <Switch>
            <Route path="/signup">
              <SignupForm/>
            </Route>
            <Route path="/application">
              <div>Path Reached</div>
            </Route>
          </Switch>
        </div>
    );
  }
}

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) => {
    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 onSubmit={handleSubmit(onSubmit)}>
        {/* register your input into the hook by invoking the "register" function */}
        {/* <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.phoneNumber && <p>This field is required</p>}

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

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"),
      }
    )
  }
}

package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.10.1",
    "react-input-mask": "^2.0.4",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "webpack --watch --mode=development",
    "prod": "webpack --mode=production"
  },
  "eslintConfig": {
    "extends": (
      "react-app",
      "react-app/jest"
    )
  },
  "browserslist": {
    "production": (
      ">0.2%",
      "not dead",
      "not op_mini all"
    ),
    "development": (
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    )
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "path": "^0.12.7",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2"
  }
}