使用基于 js-npm 的表单字段提交表单后，Flask 服务器崩溃（不推荐使用 crbug/1173575 非 JS 模块文件）

Question

在我当前的项目中，我尝试实现一个日期选择器。 到目前为止它可以工作，但是当我想用我的自定义日期选择器提交表单时，我的应用程序中断并且烧瓶被关闭，只是crbug/1173575错误。

详细显示：

crbug/1173575, non-JS module files deprecated.
(anonym) @ VM992:6772

Ofc 我想知道问题是什么以及如何解决问题，但我也想知道如何在不破坏我的应用程序的情况下正确地将自定义 Javascript/HTML5 输入字段添加到我的 WTForm 中。 我假设我的日期选择器没有正确连接到我的 WTorm。 有人知道可能是什么问题，还是您需要更多细节？

new_artist.html (Artist_Form)

{% extends 'layouts/main.html' %}
  {% block title %} New Artist {% endblock %} 
{% block content%}
<div class="form-wrapper">
  <form method="post" class="form">
    <h3 class="form-heading">List a new artist</h3>
    <div class="form-group">
      <label for="name">Name</label>
      {{ form.name(class_ = 'form-control', autofocus = true) }}
    </div>
    <div class="form-group">
      <label>City & State</label>
      <div class="form-inline">
        <div class="form-group">
          {{ form.city(class_ = 'form-control', placeholder='City', autofocus =
          true) }}
        </div>
        <div class="form-group">
          {{ form.state(class_ = 'form-control', placeholder='State', autofocus
          = true) }}
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="phone">Phone</label>
      {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx',
      autofocus = true) }}
    </div>
    <div class="form-group">
      <label for="genres">Genres</label>
      <small>Ctrl+Click to select multiple</small>
      {{ form.genres(class_ = 'form-control', placeholder='Genres, separated by
      commas', autofocus = true) }}
    </div>
    <div class="form-group">
      <label for="facebook_link">Facebook Link</label>
      {{ form.facebook_link(class_ = 'form-control', placeholder='http://',
      autofocus = true) }}
    </div>

    <div class="form-group">
      <label for="image_link">Image Link</label>
      {{ form.image_link(class_ = 'form-control', placeholder='http://',
      autofocus = true) }}
    </div>

    <div class="form-group">
      <label for="website_link">Website Link</label>
      {{ form.website_link(class_ = 'form-control', placeholder='http://',
      autofocus = true) }}
    </div>

    <div class="form-group">
      <label for="seeking_venue">Looking for Venues</label>
      {{ form.seeking_venue(placeholder='Venue', autofocus = true) }}
    </div>

    <div class="form-group">
      <label for="seeking_description">Seeking Description</label>
      {{ form.seeking_description(class_ = 'form-control', autofocus = true) }}
    </div>

   
    <div class="form-group">
      <label for="datepicker">Availabilities</label>
      <input type="text" id="datepicker" name="datepicker" class="form-control", autofocus="true">
    </div>


    <input
      type="submit"
      value="Create Artist"
      class="btn btn-primary btn-lg btn-block"
    />
  </form>
</div>
{% endblock %}

main.html

<!doctype html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>

<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- /meta -->

<!-- styles -->
{% block stylesheets %}
<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css">
{% block stylesheets_local %}{% endblock %}
<!-- /styles -->
{% endblock %}

<!-- favicons -->
<link rel="shortcut icon" href="/static/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/static/ico/favicon.png">
<!-- /favicons -->

<!-- scripts -->
{% block javascript %}

<script src="https://kit.fontawesome.com/af77674fe5.js"></script>
<script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
<script src="/static/js/libs/moment.min.js"></script>
<script type="text/javascript" src="/static/js/script.js" defer></script>
<script src="/static/dist/main.bundle.js" defer></script>
<script>console.log("This is main.html");</script>
<!-- <script type="text/javascript" src="/static/dist/main.bundle.js" defer></script> -->
{% block javascript_local %}{% endblock %}
{% endblock %}


<!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
<!-- /scripts -->
</head>
<body>

  <!-- Wrap all page content here -->
  <div id="wrap">

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">🔥</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li>
              {% if (request.endpoint == 'venues') or
                (request.endpoint == 'search_venues') or
                (request.endpoint == 'show_venue') %}
              <form class="search" method="post" action="/venues/search">
                <input class="form-control"
                  type="search"
                  name="search_term"
                  placeholder="Find a venue"
                  aria-label="Search">
              </form>
              {% endif %}
              {% if (request.endpoint == 'artists') or
                (request.endpoint == 'search_artists') or
                (request.endpoint == 'show_artist') %}
              <form class="search" method="post" action="/artists/search">
                <input class="form-control"
                  type="search"
                  name="search_term"
                  placeholder="Find an artist"
                  aria-label="Search">
              </form>
              {% endif %}
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li {% if request.endpoint == 'venues' %} class="active" {% endif %}><a href="{{ url_for('venues') }}">Venues</a></li>
            <li {% if request.endpoint == 'artists' %} class="active" {% endif %}><a href="{{ url_for('artists') }}">Artists</a></li>
            <li {% if request.endpoint == 'shows' %} class="active" {% endif %}><a href="{{ url_for('shows') }}">Shows</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <main id="content" role="main" class="container">

      {% with messages = get_flashed_messages() %}
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-block alert-info fade in">
              <a class="close" data-dismiss="alert">&times;</a>
              {{ message }}
            </div>
          {% endfor %}
        {% endif %}
      {% endwith %}

      {% block content %}{% endblock %}
      
    </main>

  </div>

  <div id="footer">
    <div class="container">
      <p>Fyyur &copy; All Rights Reserved.</p>
      {% block footer %}{% endblock %}
    </div>
  </div>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
  <script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
  <script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
  <script type="text/javascript" src="/static/js/plugins.js" defer></script>


</body>
</html>

包.json

{
  "name": "fyyur-js",
  "version": "1.0.0",
  "description": "This package serves the frontend js modules needed to run js functionalities in the fyyur application",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch",
    "watch-dev": "npx webpack watch --config webpack.config.js --mode development"
  },
  "keywords": [
    "fullstack",
    "template",
    "python",
    "flask",
    "npm",
    "webpack"
  ],
  "author": "Ndrslmpk",
  "license": "ISC",
  "devDependencies": {
    "vanillajs-datepicker": "^1.2.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

index.js

console.log("This is the index.js file");

import Datepicker from '../node_modules/vanillajs-datepicker/js/Datepicker.js';

console.log("Datepicker", Datepicker);

const elem = document.getElementById('datepicker');
console.log("elem", elem);
const datepicker = new Datepicker(elem, {
  showOnClick: true,
  maxNumberOfDates: 100,
  buttonClass: 'btn',
}); 
console.log("datepicker", datepicker);

表格.py

from datetime import date, datetime
from email.policy import default
from flask_wtf import Form
from wtforms import StringField, SelectField, SelectMultipleField, DateTimeField, BooleanField, DateField
from wtforms.validators import DataRequired, Length, URL, Regexp


class ArtistForm(Form):
    name = StringField(
        'name', validators=[DataRequired()]
    )
    city = StringField(
        'city', validators=[DataRequired()]
    )
    state = SelectField(
        'state', validators=[DataRequired()],
        choices=[
            ('AL', 'AL'),
            ('WI', 'WI'),
            ('WY', 'WY'),
        ]
    )
    phone = StringField(
        'phone', validators=[Length(min=10, max=10, message="phone number is not between %(min)d and %(max)d long"), Regexp(regex='\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$', message="Phone number is not valid")]
    )
    image_link = StringField(
        'image_link',  validators=[URL()]
    )
    genres = SelectMultipleField(
        'genres', validators=[DataRequired()],
        choices=[
            ('Alternative', 'Alternative'),
            ('Blues', 'Blues'),
            ('Techno', 'Techno'),
            ('Other', 'Other'),
        ]
     )
    facebook_link = StringField(
        'facebook_link', validators=[URL()]
     )

    website_link = StringField(
        'website_link', validators=[URL()]
     )

    seeking_venue = BooleanField( 
        'seeking_venue',
        default=False, 
        false_values=('False', 'false', '') )

    seeking_description = StringField(
        'seeking_description'
     )

要求.txt

alembic==1.7.7
Babel==2.9.0
click==8.1.2
colorama==0.4.4
dominate==2.6.0
Flask==2.1.1
Flask-Bootstrap==3.3.7.1
Flask-Datepicker==0.14
Flask-Migrate==3.1.0
Flask-Moment==0.11.0
Flask-SQLAlchemy==2.4.4
Flask-WTF==0.14.3
greenlet==1.1.2
importlib-metadata==4.11.3
itsdangerous==2.1.2
Jinja2==3.0.3
Mako==1.2.0
MarkupSafe==2.1.1
postgres==4.0
psycopg2-binary==2.9.3
psycopg2-pool==1.1
python-dateutil==2.6.0
pytz==2022.1
six==1.16.0
SQLAlchemy==1.4.35
visitor==0.1.3
Werkzeug==2.0.0
WTForms==3.0.1
zipp==3.8.0